iOS 7 で iPad Safari ランドスケープ モードで innerHeight と outerHeight の不一致が見られるのはなぜですか?

iOS 7 iPad Safari ランドスケープ レイアウトの難問: innerHeight/outerHeight の異常を克服する

iOS 7 ユーザーは、Web アプリに関する珍しい難題に遭遇します。 Safari の横向きモードの iPad。 window.innerHeight (672px) は window.outerHeight (692px) とは異なるため、下部に 20 ピクセルの余分なスペースが生じるなど、予期しないレイアウトの問題が発生します。この問題は、Web コンテンツの高さを 100% 利用するアプリにとって課題となります。

レイアウト迷路の移動

この問題に対処するために、さまざまな解決策が登場しました。 1 つのアプローチでは、iOS 7 でのみ body 要素を絶対に配置する必要があります:

<code class="css">body {
    position: absolute;
    bottom: 0;
    height: 672px !important;
}</code>

ただし、このアプローチでは、余分なスペースを削除するのではなく、単に余分なスペースをページの上部に移動します。

しっかりした足場を見つける: 固定位置とユーザー エージェントの検出

より堅牢な解決策は、メディア クエリを利用して、iPad iOS 7 セッション中にのみ固定位置を body 要素に適用し、100% のパフォーマンスを保証することです。信頼性の高いレイアウトのための幅:

<code class="css">@media (orientation:landscape) {
    html.ipad.ios7 > body {
        position: fixed;
        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>

次の手法を使用します。 、Web アプリは、iOS 7 iPad Safari の innerHeight/outerHeight の不一致を効果的に中和し、縦向きと横向きの両方で一貫した洗練されたブラウジング エクスペリエンスを提供できます。

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