Ipad：window.height() 在 Safari 中给出了不好的价值，但在 Chrome 中没有答案

【问题标题】：Ipad: window.height() give bad value in Safari but not in ChromeIpad：window.height() 在 Safari 中给出了不好的价值，但在 Chrome 中没有
【发布时间】：2013-11-24 14:42:24
【问题描述】：

我必须在 Ipad 上获取窗口的高度才能以全高显示某些内容。

我已经完成了这个示例页面：http://daviddarx.com/stuffs/work/biceps/ipad/

这是我的js代码，很简单，只在body中写了window.height()：

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

有两个问题，在我的 IOS7 的 ipad2 上： - 在 safari 中，但不是在 Chrome 中，显示的值不适合实际页面高度（我检查了屏幕截图）

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

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

提前感谢您的帮助！大卫

@Gal V：

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

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

-Scrolling problems on a web page with fixed header and footer in iOS7

-iOS 7 iPad Safari Landscape innerHeight/outerHeight layout issue

【问题讨论】：

标签： javascript ipad safari height

【解决方案1】：

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

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

希望有帮助。

【讨论】：

能否请您发布该功能？

【解决方案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)";
}

【讨论】：

看日期。那时还没有iOS7。
czuendorf，真的，对不起。

【解决方案3】：

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

在您的页面上插入：

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

而不是，

$(window).height()

获取窗口高度，使用，

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

祝你好运！

【讨论】：