我有一个已上传到 Apple itunesconnect 商店的应用程序。我已将 XCode 编译器锁定为仅以纵向模式(以及 180 度)和 iPhone(此版本中没有横向和 iPad)显示。我已经在所有 Apple 的模拟器和 iPhone 4 上对其进行了测试。相关代码是查询移动设备,我已经使用 PhoneGap 将其包装起来。
这是一个屏幕截图,显示了模拟器和我的 iPhone 上的外观:图片没有问题 http://html6store.com/AppStoreOriginal.png。
这是我生成此页面的完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi' />
<title>Shots Lite</title>
<link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
function procClick(a) {
if(typeof(Storage)!=="undefined")
{
sessionStorage.shotsSelectedOption=a;
}
else
{
//document.getElementById("page").innerHTML="Sorry, your browser does not support web storage...";
alert('Since your browser doesn\'t support web storage, just transfering control to the detail page');
}
location.href='testSliderDAdultd.html';
}
function loadFnct() {
$("h5").css("font-size", "11pt");
}
</script>
</head>
<body onLoad="loadFnct();">
<div id="page" data-role="page" data-theme="b">
<div data-role="header">
<h1>Shots Lite</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a onClick="procClick(0);">19-21 Years</a></li>
<li><a onClick="procClick(1);">22-26 Years</a></li>
<li><a onClick="procClick(2);">27-49 Years</a></li>
<li><a onClick="procClick(3);">50-59 Years</a></li>
<li><a onClick="procClick(4);">60-64 Years</a></li>
<li><a onClick="procClick(4);">Over 64 Years</a></li>
</ul>
</div>
<div data-role="footer">
<h5>Society of Teachers of Family Medicine</h5>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page Two</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1>Page Three</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page4">
<div data-role="header">
<h1>Page Four</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
此代码实际上只是源自 Dreamweaver 的“示例页面”|“Mobile starter”|“jQuery Mobile(本地)”|“HTML5”启动器模板的代码,其中添加了一个列表到第一页并进行了一些其他小的编辑。它甚至还有不再使用的原始模板模式中的“page2”、“page3”和“page4”的 div。
这就是 App Store 所说的样子。他们的图像是 960x640,所以我假设它来自标准清晰度 iPhone。:
图片没有问题 http://html6store.com/AppStore9.17.2013.png
因此,看起来 jquery mobile 已将页面呈现为大约 3.3 倍于它上传到 App Store 时应具有的宽度,但它在我可以测试的任何地方都以正确的放大倍数显示。怎么了?如何查看、修复和测试问题?