ホームページ >ウェブフロントエンド >CSSチュートリアル >iOS 7 Safari ランドスケープ モードで window.innerHeight が window.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 が window.outerHeight と異なるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。