以下に、内容を要約した質問ベースの記事タイトルをいくつか示します。 直接的かつ有益: * iOS 7 iPad ランドスケープ モードで window.innerHeight が wi​​ndow.outerHeight と異なるのはなぜですか? * どのようにして

iOS 7 iPad Safari の横向きレイアウトの不一致

iOS 7 iPad を横向きモードで使用すると、ウィンドウが表示される Web アプリで不可解な問題が発生します。 .innerHeight と window.outerHeight が一致しません。この 20 ピクセルの違いにより、ナビゲーション要素が隠され、画面の下部で絶対位置がずれる結果になります。

この問題に対処し、ユーザー エクスペリエンスへの干渉を防ぐために、回避策を実装できます。 iOS 7 では、body 要素を絶対的に配置することにより、

body {
    position: absolute;
    bottom: 0;
    height: 672px !important;
}

残念ながら、このアプローチでは、余分なスペースが解決されるのではなく、ページの上部に単に移動されます。効果的であることが証明されている代替ソリューションは、位置を固定に変更することです:

@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 iPad ランドスケープ モードで window.innerHeight が wi​​ndow.outerHeight と異なるのはなぜですか? * どのようにしての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。