当前位置： 文江博客话题详情

升级到 jQuery 1.6/JQM b1 后，jQuery Mobile 网站在设备上不流畅

发布于 2024-11-16 11:49:36 字数 6689 浏览 3 评论 0原文

我使用 jQuery mobile 开发了一个在 Kentico CMS 中运行的网站。我之前尝试升级到 jQuery 1.6，但它破坏了设备上的流畅布局。页面加载太大，无法调整大小。在桌面上查看时，流畅性仍然很好。

随着 jQuery Mobile beta 1 的发布，我决定再试一次，但我遇到了同样的问题。没有抛出任何 js 错误，并且我尝试禁用所有自定义样式但无济于事。我找不到任何其他人发生过这种情况的记录，我被困住了。我很想升级到 JQMb1，但显然在当前状态下我无法升级。

这是主页的来源。不幸的是，Kentico 扔了很多我无法控制的东西。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"  >

<head id="Head1"><title>

    mobile

</title><meta name="description" content="" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<meta http-equiv="pragma" content="no-cache" /> 
<meta http-equiv="content-style-type" content="text/css" /> 
<meta http-equiv="content-script-type" content="text/javascript" /> 
<meta name="keywords" content="" /> 
<link type="text/css" rel="stylesheet" href="/CMSPages/GetCSS.aspx?stylesheetname=EcommerceSite" /> 
<link href="/CMSPages/GetCSS.aspx?stylesheetname=EcommerceSitePrinter" type="text/css" rel="stylesheet" media="print" />

<meta name="google-site-verification" content="" />

<meta name="msvalidate.01" content="" /><!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />-->

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />

<!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js">-->

<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

<!--<script type="text/javascript">

$(document).bind('mobileinit', function () {

    $.mobile.ajaxFormsEnabled = false;

    $.mobile.ajaxLinksEnabled = false;

    $.mobile.selectmenu.prototype.options.nativeMenu = false;

});

</script>-->

<!--<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>-->

<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>

<style type="text/css">

body {font-size:100%;}

</style>

<link rel="stylesheet" href="/App_Themes/MobileSite/mobile.css" /> 
<link rel="shortcut icon" href="/favicon.ico" /> 
<link rel="icon" href="/favicon.ico" /><link href="App_Themes/EcommerceSite/Dialogs.css" type="text/css" rel="stylesheet" /></head>

<body class="LTR Safari ENUS"   style="background-color: white">

    <form method="post" action="/mobile.aspx" id="form1">

<div>

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />

<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTU2MjkyNjQyN2Rk46frlQiixWa5BweTAF7ndB5qwTA=" />

</div>



<script type="text/javascript">

//<![CDATA[

var theForm = document.forms['form1'];

if (!theForm) {

    theForm = document.form1;

}

function __doPostBack(eventTarget, eventArgument) {

    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

        theForm.__EVENTTARGET.value = eventTarget;

        theForm.__EVENTARGUMENT.value = eventArgument;

        theForm.submit();

    }

}

//]]>

</script>





<script src="/WebResource.axd?d=hHbumMRRUKYZ0vrqhcQN_yfc6MpmVVxjApSmuWWVdvCs6PmLi2zVUXMD41WcsEU-xj5ziYAl-mqMN93BNPoItj905TM1&amp;t=634210220612724343" type="text/javascript"></script>



<div><input type="hidden" name="lng" id="lng" value="en-US" /> 
</div>

<script src="/ScriptResource.axd?d=OfR1_m-9FCjVieMCBtOoBHuRwsvK6yhyrqoOPYPF-6Fhud-MlDCtVtQ4dden6mSdtIjwbWesBqCiKDYzo-adCHCXFrzvtJnNmx1juFld48dTUVVX8nMAbzcOOgBB8DUe8-PkYtxRgG3P1wT9F7tNC31HmqU1&amp;t=ffffffffb5d86596" type="text/javascript"></script>

<script src="/ScriptResource.axd?d=zxM8t7Y1GgqE09OjHvkg-h42U8eTMkVp3YKfpojTrN8cx47sdhzZq-dDO2v6aYxR6hR5_tbvXqF7SLAJvvsn5INWAI2dsH85dykE8JWfZeEMQ4QGjTXy8-3pwbkZZs_x9sTa0pvzNeV-tFROFxF5PMwPzJkfql19aYYQd6_C5fBctCaZ0&amp;t=ffffffffb5d86596" type="text/javascript"></script>

    <div id="manPortal">



</div><script type="text/javascript">

//<![CDATA[

Sys.WebForms.PageRequestManager._initialize('manScript', document.getElementById('form1'));

Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);

//]]>

</script>




<div data-role="page">

<div data-role="header">

    <!--<a href="#" data-rel="back" data-icon="arrow-l">Back</a>-->

    <h1>Mobile</h1>

</div>

<div data-role="content">





<div id="header-sep">&nbsp;</div>

<ul style="height:auto;" class="slider">

    <li id="1"><a href="#"><img alt="" src="/App_Themes/MobileSite/Images/ambulatory.jpg" /></a></li>

    <li id="2"><a href="#"><img alt="" src="/App_Themes/MobileSite/Images/express-stroke-screening.jpg" /></a></li>

</ul>

<a data-role="button" href="/mobile/services.aspx">Our Services</a> <a data-role="button" href="/mobile/locations.aspx">Locations</a> <a data-role="button" href="/mobile/findadoctor/advanced.aspx">Find a Doctor</a>





</div>

<div data-role="footer">

            <p>

                <a href="#">Full Site</a> | <a href="/mobile/about.aspx">About Us</a> | <a href="#">Mobile Apps</a> | <a href="/mobile/privacy.aspx">Privacy Policies</a><br />

                &copy; 2011.<br />Contact Us: 

            </p>

            <div class="social">

                <p>Follow Us:</p>

                <ul> 

                   <li class="facebook"><a href="#" target="_blank">Facebook</a></li>

                   <li class="twitter"><a href="#" target="_blank">Twitter</a></li>

                   <li class="youtube"><a href="#" target="_blank">YouTube</a></li>

                </ul>

            </div>

</div>

</div>

<script src="/App_Themes/MobileSite/script.js"></script>

<script src="/App_Themes/MobileSite/responsive-slider.js"></script> 







<script type="text/javascript">

//<![CDATA[

Sys.Application.initialize();

//]]>

</script>

</form>

</body>

</html>
原文

I've developed a site with jQuery mobile that's running within a Kentico CMS. I previously attempted to upgrade to jQuery 1.6, but it broke the fluid layout on devices. The page loaded too large, and would not resize. Fluidity still worked fine when viewed on the desktop.

With the release of jQuery Mobile beta 1, I decided to try it again, and I'm getting the same problem. There are no js errors being thrown, and I've tried disabling all our custom styling to no avail. I can't find any record of this happening to anyone else, and I'm stuck. I'd love to upgrade to JQMb1, but obviously I can't in its current state.

Here's the source for the homepage. There's a lot of stuff that Kentico throws in there that I don't really have control over, unfortunately.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"  >

<head id="Head1"><title>

    mobile

</title><meta name="description" content="" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<meta http-equiv="pragma" content="no-cache" /> 
<meta http-equiv="content-style-type" content="text/css" /> 
<meta http-equiv="content-script-type" content="text/javascript" /> 
<meta name="keywords" content="" /> 
<link type="text/css" rel="stylesheet" href="/CMSPages/GetCSS.aspx?stylesheetname=EcommerceSite" /> 
<link href="/CMSPages/GetCSS.aspx?stylesheetname=EcommerceSitePrinter" type="text/css" rel="stylesheet" media="print" />

<meta name="google-site-verification" content="" />

<meta name="msvalidate.01" content="" /><!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />-->

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />

<!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js">-->

<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

<!--<script type="text/javascript">

$(document).bind('mobileinit', function () {

    $.mobile.ajaxFormsEnabled = false;

    $.mobile.ajaxLinksEnabled = false;

    $.mobile.selectmenu.prototype.options.nativeMenu = false;

});

</script>-->

<!--<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>-->

<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>

<style type="text/css">

body {font-size:100%;}

</style>

<link rel="stylesheet" href="/App_Themes/MobileSite/mobile.css" /> 
<link rel="shortcut icon" href="/favicon.ico" /> 
<link rel="icon" href="/favicon.ico" /><link href="App_Themes/EcommerceSite/Dialogs.css" type="text/css" rel="stylesheet" /></head>

<body class="LTR Safari ENUS"   style="background-color: white">

    <form method="post" action="/mobile.aspx" id="form1">

<div>

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />

<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTU2MjkyNjQyN2Rk46frlQiixWa5BweTAF7ndB5qwTA=" />

</div>



<script type="text/javascript">

//<![CDATA[

var theForm = document.forms['form1'];

if (!theForm) {

    theForm = document.form1;

}

function __doPostBack(eventTarget, eventArgument) {

    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

        theForm.__EVENTTARGET.value = eventTarget;

        theForm.__EVENTARGUMENT.value = eventArgument;

        theForm.submit();

    }

}

//]]>

</script>





<script src="/WebResource.axd?d=hHbumMRRUKYZ0vrqhcQN_yfc6MpmVVxjApSmuWWVdvCs6PmLi2zVUXMD41WcsEU-xj5ziYAl-mqMN93BNPoItj905TM1&t=634210220612724343" type="text/javascript"></script>



<div><input type="hidden" name="lng" id="lng" value="en-US" /> 
</div>

<script src="/ScriptResource.axd?d=OfR1_m-9FCjVieMCBtOoBHuRwsvK6yhyrqoOPYPF-6Fhud-MlDCtVtQ4dden6mSdtIjwbWesBqCiKDYzo-adCHCXFrzvtJnNmx1juFld48dTUVVX8nMAbzcOOgBB8DUe8-PkYtxRgG3P1wT9F7tNC31HmqU1&t=ffffffffb5d86596" type="text/javascript"></script>

<script src="/ScriptResource.axd?d=zxM8t7Y1GgqE09OjHvkg-h42U8eTMkVp3YKfpojTrN8cx47sdhzZq-dDO2v6aYxR6hR5_tbvXqF7SLAJvvsn5INWAI2dsH85dykE8JWfZeEMQ4QGjTXy8-3pwbkZZs_x9sTa0pvzNeV-tFROFxF5PMwPzJkfql19aYYQd6_C5fBctCaZ0&t=ffffffffb5d86596" type="text/javascript"></script>

    <div id="manPortal">



</div><script type="text/javascript">

//<![CDATA[

Sys.WebForms.PageRequestManager._initialize('manScript', document.getElementById('form1'));

Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);

//]]>

</script>




<div data-role="page">

<div data-role="header">

    <!--<a href="#" data-rel="back" data-icon="arrow-l">Back</a>-->

    <h1>Mobile</h1>

</div>

<div data-role="content">





<div id="header-sep"> </div>

<ul style="height:auto;" class="slider">

    <li id="1"><a href="#"><img alt="" src="/App_Themes/MobileSite/Images/ambulatory.jpg" /></a></li>

    <li id="2"><a href="#"><img alt="" src="/App_Themes/MobileSite/Images/express-stroke-screening.jpg" /></a></li>

</ul>

<a data-role="button" href="/mobile/services.aspx">Our Services</a> <a data-role="button" href="/mobile/locations.aspx">Locations</a> <a data-role="button" href="/mobile/findadoctor/advanced.aspx">Find a Doctor</a>





</div>

<div data-role="footer">

            <p>

                <a href="#">Full Site</a> | <a href="/mobile/about.aspx">About Us</a> | <a href="#">Mobile Apps</a> | <a href="/mobile/privacy.aspx">Privacy Policies</a><br />

                © 2011.<br />Contact Us: 

            </p>

            <div class="social">

                <p>Follow Us:</p>

                <ul> 

                   <li class="facebook"><a href="#" target="_blank">Facebook</a></li>

                   <li class="twitter"><a href="#" target="_blank">Twitter</a></li>

                   <li class="youtube"><a href="#" target="_blank">YouTube</a></li>

                </ul>

            </div>

</div>

</div>

<script src="/App_Themes/MobileSite/script.js"></script>

<script src="/App_Themes/MobileSite/responsive-slider.js"></script> 







<script type="text/javascript">

//<![CDATA[

Sys.Application.initialize();

//]]>

</script>

</form>

</body>

</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

也只是曾经 2024-11-23 11:49:36

尝试在元标记中添加以下内容：

    <meta name="viewport" content="width=device-width, initial-scale=1">

Try adding the following in your meta tags:

    <meta name="viewport" content="width=device-width, initial-scale=1">
回复 原文
~没有更多了~

关于作者

旧城空念

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

Gabu-gabumon

文章 0 评论 0

qq_CgiN62

文章 0 评论 0

荔枝明

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

独守阴晴ぅ圆缺

文章 0 评论 0

¤→小豸慧

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文