以下是一些基於問題的文章標題，概括了內容： 直接且資訊豐富： * 為什麼 iOS 7 iPad 橫向模式下的 window.innerHeight 與 window.outerHeight 不同？ * 如何

iOS 7 iPad Safari 橫向佈局差異

在橫向模式下使用iOS 7 iPad 時，Web 應用程式會出現一個令人費解的問題，其中視窗.innerHeight 和window.outerHeight 不對齊。這 20 像素的差異會導致導航元素被遮擋，並且螢幕底部的絕對定位未對齊。

為了解決此問題並防止其乾擾使用者體驗，可以實施解決方法。在 iOS 7 中專門透過絕對定位 body 元素：

body {
    position: absolute;
    bottom: 0;
    height: 672px !important;
}

遺憾的是，這種方法只是將多餘的空間轉移到頁面頂部，而不是解決它。已證明有效的替代解決方案是將定位修改為固定：

@media (orientation:landscape) {
    html.ipad.ios7 > body {
        position: fixed;
        bottom: 0;
        width:100%;
        height: 672px !important;
    }
}

此外，可以使用腳本來檢測運行 iOS 7 的 iPad 裝置：

if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
    $('html').addClass('ipad ios7');
}

以上是以下是一些基於問題的文章標題，概括了內容： 直接且資訊豐富： * 為什麼 iOS 7 iPad 橫向模式下的 window.innerHeight 與 window.outerHeight 不同？ * 如何的詳細內容。更多資訊請關注PHP中文網其他相關文章！