iphone - jquery mobile、phone gap、iosのBazaarページ表示

Question

Apple itunesconnect ストアにアップロードしたアプリがあります。XCode コンパイラをロックして、縦向きモード (およびその 180 度) と iPhone (このバージョンでは横向きも iPad もありません) でのみ表示されるようにしました。すべての Apple のシミュレーターと iPhone 4 の両方でテストしました。関連するコードは query mobile で、PhoneGap でラップしました。

これは、シミュレーターと私の iPhone の両方での外観を示すスクリーンショットです。
このページを生成するための完全なコードは次のとおりです。

<!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 の "Page from Sample"|"Mobile starter"|"jQuery Mobile (Local)"|"HTML5" スターターテンプレートから派生したコードであり、最初のページにリストが追加され、その他いくつかの小さな編集が加えられています。元のテンプレートパターンの "page2"、"page3"、"page4" の div はまだ使用されていません。

そして、これがApp Storeによると、それがどのように見えるかです. 彼らの画像は 960x640 だったので、標準解像度の iPhone のものだと思います。

問題のない画像 http://html6store.com/AppStore9.17.2013.png

したがって、jquery mobile は、App Store にアップロードされたときの約 3.3 倍の幅でページをレンダリングしたように見えますが、テストできる場所ならどこでも正しい倍率で表示されます。なにが問題ですか？問題を表示し、修正してテストするにはどうすればよいですか?

iphone - jquery mobile、phone gap、iosのBazaarページ表示

1 に答える 1

Related

Reference