iOS 7 Safari for iPad のランドスケープ モードに 20 ピクセルの高さの不一致があるのはなぜですか?

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

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

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

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

<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>

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

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