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

我遇到了一个奇怪的问题，似乎是各种版本的 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.

解决方案

我已经为此奋斗了很长时间(因为 我的插件的错误)，我已经找到了如何在 Mobile Safari 中获得适当窗口高度的方法.

在没有 用预定义的状态栏高度减去屏幕高度(将来可能会改变).它适用于 iOS6 全屏模式.

一些测试(在屏幕尺寸为 320x480 的 iPhone 上，在横向模式下):

//返回包括所有工具栏在内的屏幕高度//需要检测方向.(我们的测试为 320px)window.orientation === 0 ?屏幕高度:屏幕宽度//返回可见区域的高度//如果放大，它会减小window.innerHeight//返回屏幕高度减去所有工具栏//问题是它总是用浏览器栏的高度减去它，不管它是否存在//在全屏模式下它总是返回 320px.//当缩放级别改变时不改变.document.documentElement.clientHeight

这是检测高度的方法:

var getIOSWindowHeight = function() {//获取移动端 Safari 的缩放级别//注意，这种缩放检测在其他浏览器中可能无法正常工作//我们使用宽度而不是高度，因为没有垂直工具栏 :)var zoomLevel = document.documentElement.clientWidth/window.innerWidth;//window.innerHeight 返回可见区域的高度.//我们将它乘以缩放并得到真实高度.返回 window.innerHeight * zoomLevel;};//也可以获取当前显示的工具栏的高度var getHeightOfIOSToolbars = function() {var tH = (window.orientation === 0 ? screen.height : screen.width) - getIOSWindowHeight();返回 tH >1 ?tH:0；};

这种技术只有一个缺点:当页面放大时它不是像素完美的(因为 window.innerHeight 总是返回四舍五入的值).当您在顶部栏附近放大时，它也会返回不正确的值.

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

I've run into an odd issue with what appears to be various versions of Webkit browsers. I'm trying to position an element on the center of the screen and to do the calculations, I need to get various dimensions, specifically the height of the body and the height of the screen. In jQuery I've been using:

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

My page is typically much taller than the actual viewport, so when I 'alert' those variables, bodyHeight should end up being large, while screenHeight should remain constant (height of the browser viewport).

This is true in - Firefox - Chrome 15 (whoa! When did Chrome get to version 15?) - Safari on iOS5

This is NOT working in: - Safari on iOS4 - Safari 5.0.4

On the latter two, $(window).height(); always returns the same value as $('body').height()

Thinking it was perhaps a jQuery issue, I swapped out the window height for window.outerHeight but that, too, does the same thing, making me think this is actually some sort of webkit problem.

Has anyone ran into this and know of a way around this issue?

To complicate things, I can't seem to replicate this in isolation. For instance: http://jsbin.com/omogap/3 works fine.

I've determined it's not a CSS issue, so perhaps there's other JS wreaking havoc on this particular browser I need to find.

解决方案

I've been fighting with this for a very long time (because of bug of my plugin) and I've found the way how to get proper height of window in Mobile Safari.

It works correctly no matter what zoom level is without subtracting height of screen with predefined height of status bars (which might change in future). And it works with iOS6 fullscreen mode.

Some tests (on iPhone with screen size 320x480, in landscape mode):

// 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 

Here is how height is detected:

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;
};

Such technique has only one con: it's not pixel perfect when page is zoomed in (because window.innerHeight always returns rounded value). It also returns incorrect value when you zoom in near top bar.

One year passed since you asked this question, but anyway hope this helps! :)