jQuery/JS,iOS 4和$(文档).height()问题

Question

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

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

我的页面通常比实际视口高很多,所以当我'警告'那些变量时,bodyHeight最终会变大,而screenHeight应该保持不变(浏览器视口的高度).

这是真的 - Firefox - 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)我已经找到了如何在Mobile Safari中获得适当高度的窗口的方法.

无论什么缩放级别没有使用预定义的状态栏高度(将来可能会更改)减去屏幕高度,它都能正常工作.它适用于iOS6全屏模式.

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

// 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总是返回舍入值).当您在顶部栏附近放大时,它也会返回不正确的值.

你提出这个问题已经过去了一年,但无论如何希望这会有所帮助!:)