為什麼 iPad Safari 橫向模式在 iOS 7 中出現內部高度/外部高度差異？

iOS 7 iPad Safari 橫向佈局難題：克服innerHeight/outerHeight 異常

iOS 7 用戶在使用Web 應用程式時遇到了一個不適合應用程式尋常的難題iPad 處於Safari 的橫向模式。 window.innerHeight (672px) 與 window.outerHeight (692px) 不同，導致意外的佈局問題，例如底部有 20px 的額外空間。此問題對使用 100% 網頁內容高度的應用程式提出了挑戰。

導航佈局迷宮

為了解決此問題，出現了各種解決方案。一種方法僅在 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>

透過採用這些技術，網頁應用程式可以有效消除iOS 7 iPad Safari 中的內部高度/外部高度差異，並在縱向和橫向方向上提供一致且精美的瀏覽體驗。

以上是為什麼 iPad Safari 橫向模式在 iOS 7 中出現內部高度/外部高度差異？的詳細內容。更多資訊請關注PHP中文網其他相關文章！