50

我在 iPad iOS7 横向模式上有一个奇怪的错误。

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

即使我<html>和<body>标签的高度为 100%，似乎还有滚动空间，奇怪的是这个问题只出现在 landscpae

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

即使我将两个标签的高度都设置为height: 672px !important和position:absolute; bottom: 0;，您仍然可以通过触摸 iframe 垂直滚动内容（广告是 iframe）。

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

谢谢你的帮助。

4

4 回答 4

16

I used this JavaScript solution for solving that problem:

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)";
}
于 2013-11-28T16:39:30.447 回答
15

我相信这是 iOS 7 中的一个错误 - 如果您将其旋转到纵向模式，它会将两者 (innerHeight/outerHeight) 设置为相同的值。如果它不是一个错误，那么纵向模式就有一个，因为行为不一致。

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

于 2013-09-19T14:48:09.653 回答
7

我会结合答案。谢谢大家！

你可以这样做：

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

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

干杯!

于 2013-11-21T18:17:39.173 回答
1

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

这是我的解决方案。

我听了resize，scroll，orientationChange事件，以确保当用户触发屏幕尺寸变化时，会调用reset height函数。

我写了一个去抖动来防止多次调用。

它在一个闭包中，没有依赖（没有 jQuery）。

(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();
  }
})();
于 2015-01-21T21:31:57.613 回答