iOS 7 iPad Safari Landscape 内高度/外高度布局问题 [英] iOS 7 iPad Safari Landscape innerHeight/outerHeight layout issue

问题描述

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

这个问题也在这里的这个问题中概述:IOS 7 - css - html 高度 - 100% = 692px>

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

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

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

body {位置:绝对；底部:0；高度:672px！重要；}

对于强制outerHeight 匹配innerHeight 的任何帮助，或绕过它以便我们的用户看不到这个问题，我们将不胜感激.

解决方案

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

@media (orientation:landscape) {html.ipad.ios7 >身体 {位置:固定；底部:0；宽度:100%；高度:672px！重要；}}

我还使用了一个脚本来检测带有 iOS 7 的 iPad:

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

We're seeing issues with a web app that has a height of 100% on Safari in iOS 7. It appears that the window.innerHeight (672px) doesn't match window.outerHeight (692px), but only in landscape mode. What ends up happening is that in an app with 100% height on the body, you get 20px of extra space. This means that when a user swipes up on our app, the navigation elements get pulled behind the browser chrome. It also means that any absolutely positioned elements that are at the bottom of the screen end up being 20px off.

This issue was also outlined in this question here: IOS 7 - css - html height - 100% = 692px

And can be seen in this ambiguous screenshot:

What we're trying to do is hack around this so that until Apple fixes the bug, we don't have to worry about it.

One way of doing this is to absolutely position the body only in iOS 7, but this pretty much puts the extra 20px at the top of the page instead of the bottom:

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

Any help with forcing outerHeight to match innerHeight, or hacking around it so that our users can't see this issue would be much appreciated.

解决方案

In my case, the solution was to change positioning to fixed:

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

I also used a script to detect iPad with iOS 7:

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

这篇关于iOS 7 iPad Safari Landscape 内高度/外高度布局问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！