iOS 7 iPad Safari景观innerHeight / outerHeight布局问题

问题描述

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

这个问题在这个问题中也有概述：

在这个模糊的屏幕截图中可以看到：

我们要做的是破解这个问题，这样，直到苹果修复了错误，我们不必担心这样做的一种方法是将主体仅仅放置在iOS 7中，但这实际上将额外的20px放在页面的顶部，而不是在页面的顶部。底部：

  body {
 position：absolute; 
 bottom：0; 
 height：672px！important; 
} 
  

任何帮助强制outerHeight匹配innerHeight，

解决方案

在我的例子中，解决方案是将定位更改为fixed：

  @media（orientation：landscape）{
 html.ipad.ios7> body {
 position：fixed; 
 bottom：0; 
 width：100％; 
 height：672px！important; 
} 
} 
  

我还使用脚本来检测iPad的iOS 7 ：

  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景观innerHeight / outerHeight布局问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！