Question

我开发了一个在Kentico CMS中运行的jQuery mobile网站。我之前尝试升级到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>

Answer 1

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

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

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

1 个答案: