0

問題の説明:

現在、requirejs、backbone、jquery を使用して phonegap でコードを開発しています。Androidフォンでアプリを表示し、画面を縦に保持すると（幅が高さよりも狭い）、ページのレンダリングが全幅を占有しません（95％程度でスタックします）。電話を回転させると、画面は 100% の表示幅を占有します。

body 内の div の width を設定しても 100% レンダリングされません ...

表示されているデバイスには Android 2.3.5 バージョンがあり、phonegap のビルドには

<uses-sdk android:minSdkVersion="7" android:targetSdkVersion="15"/>

HTML と CSS:

以下は、index.html と関連する css です。

  <body>
 <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=1, initial-scale=1, minimum-scale=1, maximum-scale=1.0, width=device-width, height=device-height, target-densityDpi=device-dpi" />

    <...and host of css....>

     </head>
    <header class="header">
      <img .....some image/>
    </header>

    <div id="page-wrap"> 
      <div class="mcontent"></div>
    </div>  

    <!-- native libs -->
    <script type="text/javascript" src="cordova.js"></script>
    <!-- third party libs -->
    <script type="text/javascript" data-main="js/scripts/main" src="js/scripts/vendor/require.js"></script>


  </body></html>

そしてCSS：

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:12px;
    margin:0px;
    padding:0px;
/*    text-transform:uppercase;*/
    height: 100%; 
    overflow-x:hidden;
}

#page-wrap{
    background: none repeat scroll 0 0 #FFFFFF;
    display:block;
}

.header{
    height:100px;
    background:#ccff33;  /* #4fd5d6; */
    width:100%;    
}

.header .logo{
    padding-top:10px;
    padding-left:20px;
    height:60px;
    line-height:100px;
    font-height:60px;
    font-weight:bold;
}

css の重要事項: Body には含まれて"overflow-x": hiddenおり、ビューポートは phonegap からデフォルトで設定されています。

彼を修正する方法の手がかりは大歓迎です...

4

2 に答える 2

0

うまくいけば、これは他の人に役立ちます...多くの闘争の後、これが機能します...素晴らしく...シンプルです...

.header{
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    position:fixed;
    overflow-x:hidden;
    top:0;
    z-index:1;
}

また、overflow-x:hidden がないと、解決策がくだらないことに注意してください。画面は左に移動できます。

それだけです...（固定位置は必要ありません...しかし余白は....）

また、クロムのリップルツールは常に実際のデバイスを複製しないことが観察されます...私の場合、固定ヘッダーは実際には固定されていませんが、まだスクロール可能です...しかし、リップルでは固定されているように見えます...

質問は、これが他のデバイスでどのように機能するかをどうやって知ることができるでしょうか....? どんな手がかりも役に立ちます....

于 2013-06-14T18:38:49.450 に答える