Ipad：window.height（）在Safari中给出​​了不好的价值但在Chrome中没有

Question

我必须在Ipad上获得窗口的高度以显示全高度的东西。

我做了这个示例页面： http ： //daviddarx.com/stuffs/work/biceps/ipad/

这是我的js代码，非常简单，只在体内编写window.height（）：

generalResizeListener=function(){
    screenW=$(window).width();
    screenH=$(window).height();
    $("body").html(screenH)
    console.log(screenH);
}
$(window).resize(generalResizeListener);

我的ipad2与IOS7有两个问题： - 在Safari中，但在Chrome中没有，显示的值不适合实际的页面高度（我查看截图）

- 在Safari中，即使页面中没有任何内容，页面的高度也比视口大，我可以向下滚动10-20px。 这是最大的问题。

你知道为什么会这样吗？ 我的演示页面中没有任何css文件，所以我真的不明白。

预先感谢您的帮助！ 大卫

---

@Gal V：

我已经实现了这个“hacky解决方案”。 无论如何，谢谢你的回答！ 我在谷歌看起来更多，它似乎是safari IOS7的特定错误：

- https://discussions.apple.com/message/23150650#23150650

- 在iOS7中使用固定页眉和页脚在网页上滚动问题

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

Answer 1

iOS上的Safari浏览器有一个底栏 （不像chrome），它在窗口高度内计算，而它实际上不是窗口/页面的一部分。

您需要检测客户端在iOS设备上使用Safari浏览器的情况（使用用户代理），然后您需要将正文的高度（使用javascript）设置为$(window).height() - bar_height ，以及它应该解决你的问题。

希望有所帮助。

Answer 2

我使用这个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);
    }
  }.bind(this);

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

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

Answer 3

我的解决方案是......

将其插入您的页面：

<div id="win-height" style="position: fixed;left: 0; top: 0; bottom:0; width: 0; z-index: "></div>

代替，

$(window).height()

获得窗户高度，使用，

$('#win-height').height()

祝好运！