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

Question

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

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

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

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

您问这个问题已经一年了，但无论如何希望这对您有所帮助! :)