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>
Try adding the following in your meta tags: