Windows phone 8 に移植したい既存の Cordova アプリを開発しています。グラデーションとビューポートの問題にいくつかの修正を適用した後、すべてが機能するように見えました。昨日、携帯電話 (Lumia 520) を新しいバージョン (8.0.10328.78) に更新したところ、突然、固定フッターの一部が画面の表示領域からはみ出してしまいました。
できる限りコードを削減し、見つけたデバイス幅/デバイス高さの修正のすべてのバリエーションを適用しました。
最も基本的なケースは、HTML5 サンプル アプリでも表示されます。
<div style="position: fixed; bottom:0; left:0; right:0; background-color: red; height:30px;">footer</div>
が追加されます。下にスクロールしない限り、上位 10 ピクセルしか表示されません。さらに、フッターが固定されていないわけではありません。非常に長いページ (複数の画面の長さ) を作成すると、フッターは同じ場所に留まるからです (完全に下までスクロールするまで、約 20 ピクセルが表示されなくなります)。完全に下にスクロールすると、ヘッダーの上部 20 ピクセルが非表示になります。
サンプルアプリにはすでに
@-ms-viewport{ width: 320px; }
デフォルトではその中にあります。しかし、実際に私が今見ている問題は、それを追加することで修正されたものとは異なります。(古いケースでは、フッターが下部から約 20 ピクセル上に浮いているのが見えますが、ms-viewport セクションが削除されても、それはもう起こりません。)
さらに、いくつかの測定を行いました。
window.screen.height => 800
window.innerHeight => 512
window.outerHeight => 512
$(window).height() => 533