css - iOS 7 iPad Safari Landscape innerHeight/outerHeight 布局问题

Question

我们发现在 iOS 7 的 Safari 上高度为 100% 的网络应用程序存在问题。window.innerHeight (672px) 似乎与 window.outerHeight (692px) 不匹配，但仅在横向模式下模式。最终发生的事情是，在主体高度为 100% 的应用程序中，您会获得 20px 的额外空间。这意味着当用户向上滑动我们的应用程序时，导航元素会被拉到浏览器 chrome 后面。这也意味着任何位于屏幕底部的绝对定位元素最终都会偏离 20 像素。

此问题也在此处概述了此问题: IOS 7 - css - html height - 100% = 692px

并且可以在这张模棱两可的截图中看到:

我们正在尝试做的是解决这个问题，这样在 Apple 修复错误之前，我们不必担心它。

这样做的一种方法是仅在 iOS 7 中绝对定位 body，但这几乎会将额外的 20px 放在页面顶部而不是底部:

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

任何有关强制 outerHeight 匹配 innerHeight 或绕过它以使我们的用户看不到此问题的帮助将不胜感激。

Answer 1

就我而言，解决方案是将定位更改为固定:

@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');
}