iOS 7 Safari ランドスケープ モードで window.innerHeight が wi​​ndow.outerHeight と異なるのはなぜですか?

iOS 7 iPad Safari 横向きレイアウトのバグ: InnerHeight/OuterHeight の不均衡

iOS 7 Safari では、本体の高さが 100% の Web アプリケーションランドスケープモードで特有の問題が発生します。 window.innerHeight (672px) は window.outerHeight (692px) とは異なります。

この不一致により、表示可能領域の下に追加の 20 ピクセルのスペースが生じ、上にスワイプするとナビゲーション要素がブラウザー クロムの背後に隠れてしまいます。 。画面下部に絶対に配置された要素も 20 ピクセルずれて表示されます。

回避策

このバグを軽減するには、ボディの高さを明示的に設定する CSS ハックを適用できます。

<code class="css">@media (orientation:landscape) {
    html.ipad.ios7 > body {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 672px !important;
    }
}</code>

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

<code class="javascript">if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
    $('html').addClass('ipad ios7');
}</code>

この回避策を適用すると、outerHeight はinnerHeight と強制的に一致させることで、アプリのレイアウトが iOS 7 Safari ランドスケープ モードで意図したとおりに動作するようにします。

以上がiOS 7 Safari ランドスケープ モードで window.innerHeight が wi​​ndow.outerHeight と異なるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。