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

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

Patricia Arquette

リリース： 2024-10-26 04:10:27

オリジナル

791 人が閲覧しました

Here are a few question-based article titles that encapsulate the content:

Direct and Informative:

* Why is window.innerHeight Different from window.outerHeight in iOS 7 iPad Landscape Mode?
* How to Fix the 20px Discrepancy with Window Heights in iOS 7

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