為什麼 iOS 7 Safari for iPad 的橫向模式有 20px 高度差異？

iOS 7 Safari 橫向佈局差異：innerHeight 與outerHeight

在iPad 版iOS 7 Safari 中，Web 應用程式會出現一個特殊問題應用程式會出現一個特殊問題：利用100% 高度。 window.innerHeight (672px) 和 window.outerHeight (692px) 值僅在橫向模式下有所不同。這種差異會導致額外 20 像素的未使用空間，從而影響螢幕底部導航元素和絕對定位元素的佈局。

為了緩解此問題，直到 Apple 解決問題，開發人員已採取變通辦法。一種方法涉及在 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>

透過實作此解決方法，開發人員可以確保iPad 版iOS 7 Safari 中的正確佈局行為，消除麻煩的高度差異及其對導航和定位的影響。

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