I have a simple app developed with jQuery Mobile and implemented in PhoneGap. It works fine in the iPad 4.3 simulator, but not on iPad 5.0 simulator and an actual iPad running iOS 5…
This is the head section of the html file:
<head>
<meta charset="utf-8"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta content="width=device-width,minimum-scale=1,maximum-scale=1" name="viewport"/>
<link rel="apple-touch-icon" href="icon.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="icon.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="icon.png"/>
<title>App demo</title>
<link rel="stylesheet" href="scripts/jquery.mobile-1.0rc2.min.css"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"/>
<script type="text/javascript" src="scripts/jquery.mobile-1.0rc2.min.js"/>
<script type="text/javascript" src="scripts/general.js"></script>
<script type="text/javascript" src="scripts/app.js"/>
</head>
When I run it on iPad simulator 4.3 everything works great. But on 5.0 it just shows a blank screen. Same with the actual iPad with iOS 5. If however I remove the script references it sort of “works” in that it shows the content of the HTML page, but of course without the styling and functionality of jQuery Mobile… Including any jQuery at all seems to break it, e.g. if i leave in only the reference to jquery-1.6.4.min.js it won’t work either. Or one of my custom js files for that matter.
Does anyone know what’s going on here? Does it have something to do with placement of the file references? I think I have placed them in the correct order (jQuery first, then jQuery mobile and then my custom js)… It doesn’t seem like it never works, I tried this app http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/ and that works fine. It has the script references rather strangely placed at the bottom of the file, just before the closing body tag. But I tried doing that too, and then the jQuery Mobile stuff didn’t kick in at all (although I could see the content).
And still, since it works in the 4.3 simulator I don’t think there is something really wrong with my code, but then why doesn’t it work in 5.0?
This question here on stack overflow seems to suggest that the UIWebView in iOS5 requires external script links to have an actual closing tag rather than simply ending with ‘/>’.
Try to change the links to:
Does that change anything?