Javascript jQuery/JS、iOS 4和$（document）.height（）问题

我遇到了一个奇怪的问题，即各种版本的Webkit浏览器。我试着把一个元素放在屏幕的中心，为了进行计算，我需要得到各种尺寸，特别是主体的高度和屏幕的高度。在jQuery中，我一直在使用：

var bodyHeight = $('body').height();
var screenHeight = $(window).height();

我的页面通常比实际的视口高出很多，因此当我“警告”这些变量时，bodyHeight应该是大的，而screenHeight应该保持不变（浏览器视口的高度）

这在中国是真实的 -火狐 -Chrome15（哇！Chrome15是什么时候发布的？） -iOS5上的狩猎

这不适用于： -iOS4上的狩猎 -Safari 5.0.4

在后两者上，

$（window.height（）

始终返回与

$（'body'）.height（）相同的值。

考虑到这可能是jQuery的问题，我将窗口高度换成了

window.outerHeight

，但这也做了同样的事情，让我觉得这实际上是某种webkit问题

有没有人遇到过这个问题，知道解决这个问题的方法

使事情复杂化的是，我似乎不能孤立地复制这一点。例如：工作很好

---

我已经确定这不是一个CSS问题，所以可能有其他的JS在这个特定的浏览器上造成了巨大的破坏，我需要找到

我已经为此奋斗了很长一段时间（因为），我找到了在Mobile Safari中获得适当窗口高度的方法

无论没有什么缩放级别，它都能正常工作（将来可能会更改）。它可以在iOS6全屏模式下工作

一些测试（在屏幕尺寸为320x480的iPhone上，在横向模式下）：

以下是如何检测高度：

var getIOSWindowHeight = function() {
    // Get zoom level of mobile Safari
    // Note, that such zoom detection might not work correctly in other browsers
    // We use width, instead of height, because there are no vertical toolbars :)
    var zoomLevel = document.documentElement.clientWidth / window.innerWidth;

    // window.innerHeight returns height of the visible area. 
    // We multiply it by zoom and get out real height.
    return window.innerHeight * zoomLevel;
};

// You can also get height of the toolbars that are currently displayed
var getHeightOfIOSToolbars = function() {
    var tH = (window.orientation === 0 ? screen.height : screen.width) -  getIOSWindowHeight();
    return tH > 1 ? tH : 0;
};

这种技术只有一个缺点：当页面放大时，它不是像素完美的（因为

window.innerHeight

总是返回舍入值）。在靠近顶部栏放大时，它也会返回不正确的值

---

你问这个问题已经一年了，但无论如何，希望这能有所帮助！：）

我也有类似的问题。这与两件事有关：

框大小CSS3属性： 在这本书中，我发现：

请注意，.height（）将始终返回内容高度，而与CSS框大小属性的值无关。从jQuery 1.8开始，这可能需要检索CSS height plus box sizing属性，然后在元素具有box sizing:border box时减去每个元素上的任何潜在边框和填充。为了避免这种损失，请使用.css（“height”）而不是.height（）

这可能适用于

$（'body'）.height（）

文档准备与窗口加载

$（document）.ready（）

在DOM准备好JS时运行，但可能图像尚未完成加载。使用

$（window.load（）

修复了我的问题

---

我希望这会有所帮助。

jQuery提供了一个跨浏览器解决方案

使用此属性：

$（窗口）.height（）

这将返回一个int值，该值表示浏览器可见屏幕高度的大小（以像素为单位）。

请尝试以下操作：

var screenHeight = (typeof window.outerHeight != 'undefined')?Math.max(window.outerHeight, $(window).height()):$(window).height()

---

现在是2015年，我们现在是iOS 8。iOS9已经快到了。这个问题仍然存在。唉

我已经为中的窗口大小实现了跨浏览器解决方案。它不受任何浏览器嗅探的影响，并且经过了大量的单元测试。下面是它的工作原理：

• 调用

  $.windowHeight（）

  以获取窗口的高度。这是当前缩放级别在视口中实际看到的区域的高度，单位为CSS像素
• 调用

  $.windowHeight（{viewport:“layout”}）

  以获取窗口的高度。这是可视区域在1:1缩放时的高度——“原始窗口高度”

只要为您的任务选择合适的视口，您就完成了

---

在幕后，计算大致遵循以下步骤。我已经写了相关的步骤。如果您感兴趣，请查看。您是否尝试过

$（document）.height（）

？@gaby，它生成的值略高于

$（'body'）。height（）

hmm。。一定是填充物。。。再看看。。。（以防万一）@gaby，但我不需要文档高度。我需要视口的高度。@gaby…啊哈！不过，这个链接确实有一些有用的东西。它使用的是

document.documentElement.clientHeight

，这似乎准确地抓住了视口。调查更多…正如你在问题中所注意到的，然而，事实并非如此…至少我写问题时并非如此。也许在较新版本的jQuery中处理得更好。我应该回去重新测试一下。2014年5月，我的测试似乎还没有结束，这是jquery的一个“wontfix”。关键是jQuery中有一个bug，

$（window）.height（）

在iOS中不起作用。您的库工作得很好，谢谢！顺便说一句，

$。windowHeight（{viewport:“layout”}）

为我解决了iphone的问题。@Gavin谢谢你的反馈。你确实帮了我，至少帮了我几个小时。

var screenHeight = (typeof window.outerHeight != 'undefined')?Math.max(window.outerHeight, $(window).height()):$(window).height()