html - フッターがウィンドウの下部にありません (windows モバイル用の phonegap jquery モバイル アプリ)

Question

jquery と phonegap を使用して Windows モバイル アプリを開発しています。アプリのフッターを配置しました。

            <div class="footer" ></div>

IEブラウザでは正常に表示されています。しかし、シミュレーターではウィンドウの下から少し上に表示されています。

Answer 1

質問は jquery-mobile でタグ付けされています。したがって、jQuery モバイルを使用していると仮定します。

jQuery モバイル フッターを使用しません<div data-role="footer">か?

次に、data-postion="fixed"属性を追加することでこれを実現します。

<div data-role="footer" data-position="fixed">
    <h1>Fixed Footer!</h1>
</div>

詳細はこちら: http://view.jquerymobile.com/master/demos/widgets/fixed-toolbars/

Answer 2

Windows Phone 用の PhoneGap アプリの縦向きビューの最下部にある要素の固定位置の問題は、ブラウザ コントロールがデフォルトでアドレス バーを表示できるように空のスペースを残すことです ( bottom: 0pxCSS 属性にもかかわらず)。

解決策を左右に調べた後、次のようなメディアクエリと -ms-viewport ルールを使用して、縦向きと横向きの両方のモードでフッターを画面の一番下に表示することに成功しました。

@media screen and (min-width: 320px) and (orientation:portrait) {
  @-ms-viewport       { width: 320px!important; height:device-heigth!important; }
}
@media screen and (min-height: 320px) and (orientation:landscape) {
  @-ms-viewport       { width:auto!important; height:320px!important; }
}

縦向きモードで実際にフッターを下げる変更は、heigth:device-height!important. ただし、そうすると、他のデフォルトのビューポート設定が明らかに無効になり、ページ上のテキストが非常に小さく表示されます。テキストを読みやすくするには、幅も明示的に設定する必要があります。上記の例では、幅を 320px に設定しています。適切な設定を選択できます。

Answer 3

data-position="fixed" が機能しない場合は、フッター div から data-position="fixed" を削除して、以下を試してください。

.ui-footer{
    bottom: 0px; 
    left: 0px; 
    z-index: 10000; 
    width: 100%; 
    height: 2.5em; 
    position: fixed; 
    margin-bottom: 0px;
}

(下に !important、margin-bottom を追加してみてください)

Answer 4

.footer{
        bottom:0px !important;
        position:absolute !important;
        width:100% !important;
 }

これにより、Windows Phone 8 でのフッターの問題が修正されました。現在、ページの下部にあります。