Phonegap/jQMアプリの初回実行時にテキストとコントロールが非常に小さい

以下は、問題を示す3つの画像です。私はすぐ後で詳しく説明します。Phonegap/jQMアプリの初回実行時にテキストとコントロールが非常に小さい

First run, watch the size increase in the next picture

Everything grew. The header text and size of the controls upon selection

This is the way it should be, everything is the proper size

あなたが見ることができるように、何かは、ページが最初に不適切にレンダリングする原因になっています。私はそれが何であるかを理解できません。私はスクリプトとスタイルを並べ替えました。私が何をしていても、初めてアプリケーションを実行するときには、すべてのサイズが非常に小さく、訂正する唯一の方法は検索バーをタップすることです。

さらに悪いことに、ブラウザ、FireFox、またはChromeでこれを見ると、デバイスに展開する前に完全にレンダリングされます。それが私のデバイス上にあるまでは初めて使用すると収縮します。それがキックです。ホームボタンを押してアプリに戻っても問題ありません。私が強制停止して私のアプリを起動すると、もう少し小さいです。

<html> 
<head> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="Styles/jquery.mobile-1.0rc1.css" /> 
    <script type="text/javascript" charset="utf-8" src="Scripts/phonegap-1.1.0.js"></script> 
    <script type="text/javascript" src="Scripts/jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="Scripts/jquery.mobile-1.0rc1.min.js"></script> 
    <script type="text/javascript" src="Scripts/common.js"></script> 
</head> 
<body> 
    <div data-role="page" id="home" data-title="Search"> 
     <div data-position="fixed" data-role="header"> 
      <h1> 
       Search 
      </h1> 
     </div> 
     <div data-role="content"> 
      <form action="#" method="POST"> 
       <input id="search" type="search" placeholder="Search" /> 

       <button type="submit" data-inline="true" data-icon="search" id="searchWikiMedia"> 
        Search</button> 
      </form> 
      <div id="refineSearch"> 
       <ul data-role="listview"> 
       </ul> 
       <span id="error"></span> 
      </div> 
     </div> 
     <div data-position="fixed" data-role="footer"> 
     </div> 
    </div> 
    <div data-role="page" id="result" data-title="Results"> 
     <div data-position="fixed" data-role="header"> 
      <a href="#home" data-transition="slide" data-direction="reverse">Search</a> 
      <h1> 
      </h1> 
     </div> 
     <div data-role="content"> 
     </div> 
     <div data-role="footer"> 
      <h4> 
      </h4> 
     </div> 
    </div> 
</body> 
</html>

出典

2011-10-19 Rakshasas

最初にあなたは必ず文書型を持たせると、バリデータはhttpを通して、あなたのhtmlを実行する必要があります/ /validator.w3.org/ – Caimen

あなたのご<head>タグの間にこれを追加します。

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

さらにいくつかの読書：https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

出典

2011-10-19 20:48:58 Xavier

ありがとうございました！私はそれが約3時間のランダムな試みを救ってくれたので、私がより早く尋ねたかったと思います。私は確かにそのリンクも読むでしょう。 – Rakshasas

私は助けることができてうれしい喜んで:) – Xavier

Phonegap/jQMアプリの初回実行時にテキストとコントロールが非常に小さい

答えて

関連する問題