iOS 7 Safari のランドスケープ レイアウトの不一致: innerHeight と externalHeight

iPad 用 iOS 7 Safari では、Web アプリで特有の問題が発生します。高さを100%活用します。 window.innerHeight (672px) と window.outerHeight (692px) の値は、ランドスケープ モードでのみ異なります。この不一致により、余分な 20 ピクセルの未使用スペースが生じ、ナビゲーション要素のレイアウトや画面下部の絶対配置要素に影響を及ぼします。

Apple が対処するまでこの問題を軽減するために、開発者は回避策に頼ってきました。 1 つのアプローチでは、iOS 7 で本文を絶対に配置し、20 ピクセルのギャップをページの下部ではなく上部に効果的に移動します。ただし、より効果的な解決策が登場しました。

体の位置を固定に設定することで、この問題を回避できます:

@media (orientation:landscape) {
    html.ipad.ios7 > body {
        position: fixed;
        bottom: 0;
        width:100%;
        height: 672px !important;
    }
}

iOS 7 を実行している iPad デバイスを識別するには、次のスクリプトを使用できます:

if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
    $('html').addClass('ipad ios7');
}

この回避策を実装することで、開発者は iOS 7 Safari for iPad で適切なレイアウト動作を保証し、厄介な高さの不一致と、ナビゲーションや位置への影響を排除できます。