jQuery/JS、iOS 4 和 $(document).height() 问题

Question

我遇到了一个奇怪的问题，似乎是各种版本的 Webkit 浏览器。我试图将一个元素放置在屏幕的中心并进行计算，我需要获得各种尺寸，特别是身体的高度和屏幕的高度。在 jQuery 中我一直在使用：

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

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

这是真的 - 火狐 - Chrome 15（哇！Chrome 什么时候升级到版本 15？） - iOS5 上的 Safari

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

在后两者上，$(window).height(); 总是返回与$('body').height() 相同的值

认为这可能是一个 jQuery 问题，我将窗口高度换成了 window.outerHeight，但这也是同样的事情，让我觉得这实际上是某种 webkit 问题。

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

为了使事情复杂化，我似乎无法孤立地复制它。例如：http://jsbin.com/omogap/3 工作正常。

我已经确定这不是 CSS 问题，所以我需要找到在这个特定浏览器上造成严重破坏的其他 JS。

Answer 1

我已经为此奋斗了很长时间（因为bug of my plugin），并且我找到了如何在 Mobile Safari 中获得适当的窗口高度的方法。

在没有subtracting height of screen with predefined height of status bars 的情况下，无论缩放级别如何，它都能正常工作（将来可能会改变）。它适用于 iOS6 全屏模式。

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

// Returns height of the screen including all toolbars
// Requires detection of orientation. (320px for our test)
window.orientation === 0 ? screen.height : screen.width


// Returns height of the visible area
// It decreases if you zoom in
window.innerHeight


// Returns height of screen minus all toolbars
// The problem is that it always subtracts it with height of the browser bar, no matter if it present or not
// In fullscreen mode it always returns 320px. 
// Doesn't change when zoom level is changed.
document.documentElement.clientHeight 

这是检测高度的方法：

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 总是返回四舍五入的值）。当您在顶部栏附近放大时，它也会返回不正确的值。

你问这个问题已经一年了，但无论如何希望这会有所帮助！ :)

Answer 2

我遇到了类似的问题。它与两件事有关：

Box-sizing CSS3 属性： 在.height() jQuery documentation 我发现了这个：

请注意，.height() 将始终返回内容高度，而不管 CSS box-sizing 属性的值如何。从 jQuery 1.8 开始，这可能需要检索 CSS 高度加上 box-sizing 属性，然后当元素具有 box-sizing:border-box 时减去每个元素上的任何潜在边框和填充。为避免这种惩罚，请使用 .css("height") 而不是 .height()。

这可能适用于$('body').height()。

文档就绪与 Window.load

$(document).ready() 在 DOM 为 JS 准备就绪时运行，但图像可能尚未完成加载。使用$(window).load() 解决了我的问题。 Read more.

我希望这会有所帮助。

Answer 3

现在是 2015 年，我们现在是 iOS 8。 iOS 9 已经指日可待。问题仍然存在。叹息。

我已经为jQuery.documentSize 中的窗口大小实现了跨浏览器解决方案。它远离任何类型的浏览器嗅探，并且已经过大量单元测试。以下是它的工作原理：

• 请致电$.windowHeight() 了解visual viewport 的高度。这是您在当前缩放级别下在视口中实际看到的区域的高度，以 CSS 像素为单位。
• 请致电$.windowHeight( { viewport: "layout" } ) 了解layout viewport 的高度。这是可见区域在 1:1 缩放时的高度 - “原始窗口高度”。

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

在幕后，计算大致遵循answer by @DmitrySemenov 中概述的过程。我已经写过elsewhere on SO 所涉及的步骤。有兴趣可以看看，或者看看source code。

Answer 4

试试这个：

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

Answer 5

由jQuery设置的跨浏览器解决方案

使用此属性： $(window).height()

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