IOS 7-css-html高度-100%=692px

我在ipadios7横向模式上有一个奇怪的bug

我能够调查的是在iOS7 window.outerHeight中是692px和 window.innerHeight 672px；而在以前的版本中，两个值都是672px

尽管我的

和

标签有100%的高度，但似乎有滚动的空间，奇怪的是这个问题只出现在landscpae上

你可以通过访问t.cincodias.com来了解我所说的，例如，在iOS 7 iPad中，页脚栏（或页眉有时）将被剪切。但在以前的iOS版本中，内容在全屏上显示良好

即使我将两个标记的高度都设置为

height:672px！重要

和

位置：绝对位置；底部：0

，您仍然可以通过触摸iframe垂直滚动内容（广告是iframe）

我正在运行iOS7的发行候选版本

---

感谢您的帮助。

我相信这是iOS 7中的一个错误-如果您将其旋转到纵向模式，它会将两者（内高/外高）设置为相同的值。如果它不是一个bug，那么肖像模式有一个bug，因为行为不一致

---

如果是iOS 7，您可以检测iOS 7/mobile Safari并使用window.innerHeight。

我将结合回答。谢谢大家

您可以这样做：

if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
    $('#yourDivID').height(window.innerHeight);
    window.scrollTo(0, 0);
}

window.scrollTo解决了旋转时横条重叠的问题

---

干杯

我使用这个JavaScript解决方案来解决这个问题：

if (
    navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && 
    window.innerHeight != document.documentElement.clientHeight
) {
    var fixViewportHeight = function() {
        document.documentElement.style.height = window.innerHeight + "px";
        if (document.body.scrollTop !== 0) {
            window.scrollTo(0, 0);
        }
    };

    window.addEventListener("scroll", fixViewportHeight, false);
    window.addEventListener("orientationchange", fixViewportHeight, false);
    fixViewportHeight();

    document.body.style.webkitTransform = "translate3d(0,0,0)";
}

---

我在iOS 8中重现了同样的问题

这是我的解决办法

我听了调整大小，滚动，方向更改事件，确保当用户触发屏幕大小更改时，会调用重置高度功能

我写了一个去盎司，以防止多次呼叫

它是在一个闭包中和没有依赖关系（没有jQuery）

---

很抱歉，它的拼写是正确的，并且没有空白或填充。这里有一个很好的破解方法，对我来说确实有效：顺便说一句：这个bug似乎在iOS8上得到了修复。解决方案应该只针对iOS7。Ww也希望这只是一个bug，我们现在正在为iOS7选择一种特定的样式，但我们希望这不是最终的解决方案，谢谢你的回答。你找到了与之相关的东西吗？我在横向模式下也遇到了同样的问题，它会破坏我正在运行的每个媒体查询（对于ipad/ipad mini/ipod最新一代上的ios7横向），我在模拟器上也注意到了这一点。您会使用哪种媒体查询（如果您使用）？@Panagiotis，您可以尝试以下方式：1。设置$（窗口）。高度（672）；2.调用窗口。滚动到（0，0）；每次用户尝试滚动整个页面（使用一些锁定算法）或尝试取消绑定滚动事件时。@Panagiotis您能说出是哪个元标记产生了问题吗？它似乎是一个bug。我在上做了一个测试用例，并将其提交给了。这和你的经历相似吗？谢谢你！今天在测试我正在构建的UI时，我觉得自己有点疯了。谢谢你提供的这个解决方案，至少是有用的。但是，如果我只想在显示软键盘时运行此功能，该怎么办？有什么想法吗？非常感谢你！如果使用Apache Cordova/Phonegap并在软键盘出现时启用视口大小调整，则只能检测到显示了软键盘。

(function(){
  var setViewportHeight = (function(){
    function debounced(){
      document.documentElement.style.height = window.innerHeight + "px";
      if (document.body.scrollTop !== 0) {
          window.scrollTo(0, 0);
      }
    }
    var cancelable = null;

    return function(){
      cancelable && clearTimeout(cancelable);
      cancelable = setTimeout(debounced, 100);
    };
  })();

  //ipad safari
  if(/iPad/.test(navigator.platform) && /Safari/i.test(navigator.userAgent)){  
    window.addEventListener("resize", setViewportHeight, false);
    window.addEventListener("scroll", setViewportHeight, false);
    window.addEventListener("orientationchange", setViewportHeight, false);
    setViewportHeight();
  }
})();