iPhone（jQuery）的高度错误？答案

【问题标题】：Wrong height of iPhone (jQuery)?iPhone（jQuery）的高度错误？
【发布时间】：2012-05-20 16:08:13
【问题描述】：

我将视口标签设置为 480 像素，因此在 iPhone（纵向模式）中，网站的真实尺寸为：

顶部栏可见时为 480x534px
480x594px 当顶栏是隐藏

然而，jQuery(window).height() 和 window.innerHeight 和 jQuery(window).InnerHeight() 总是返回 480x534 像素，当尝试将 height: 100%; width: 100%; 容器放在当前内容（弹出窗口）顶部时，这会在网站底部产生 60 像素的间隙。

这已被报告为 jQuery 错误（和 iPhone 错误），但有什么解决方法吗？

【问题讨论】：

检查我对类似问题的回答，可能会有所帮助stackoverflow.com/questions/8205812/…
@DmitrySemenov 谢谢！一年前我找到了一种方法，我将此作为错误报告给 jQuery。他们说这应该在 jQuery 1.8 中修复（我们现在有 jQuery 1.9，所以也许它已经修复了）。在 iOS 升级（最近的 6.0）之后，也有重大变化，所以我敢打赌，我们必须定期关注类似的事情并更新脚本/库/插件:)

标签： jquery iphone height viewport

【解决方案1】：

当页面在 iPhone 上加载时，顶部栏会出现。
这就是为什么$(window).height() 将返回较小窗口的实际大小。
在顶部栏向上滑动一段时间后，窗口大小会发生变化。
因此您可以在(window).height() 中添加一个常量来表示顶部栏的大小，或者在hook up 到$(window).resize() 事件中添加一个常量，以在顶部面板消失后检索实际大小。

【讨论】：

我在此之前和之后使用相同（错误）值检索高度：window.addEventListener("load",function() { window.scrollTo(0, 1); });

【解决方案2】：

请务必使用外部高度而不是内部高度。不幸的是，jQuery 的 $(window).outerHeight() 不适用于 window （它返回与 $(window).height() 相同）和 document 元素，因此您必须在纯 JavaScript 中执行此操作，如关注：

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

【讨论】：