jQuery/JS，iOS 4和$（document）.height（）问题

Question

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

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

我的页面通常比实际的视高得多，所以当我警惕“这些变量，车体高度应该最终会被大的，而screenHeight应保持不变（高度浏览器视口）。

这是真实的 - 火狐 - 铬15（哇什么时候铬得到15版本！？） - Safari浏览器上的iOS5

这不是工作： - Safari浏览器上的iOS4 - 野生动物园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全屏模式。

一些测试（在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; 
}; 

这种技术仅具有一个con：当页面放大时，它不是完美的（因为window.innerHeight总是返回四舍五入的值）。当您放大顶栏附近时，它也会返回不正确的值。

自从你问这个问题后过了一年，但无论如何希望这有助于！ :)

Answer 2

我有一个类似的问题。它有2个做的事：

箱大小的CSS3属性： 在.height() jQuery documentation我发现这一点：

注意.height（）将始终返回内容的高度，不管CSS box-sizing属性的值。从jQuery 1.8开始，这可能需要检索CSS height和box-sizing属性，然后在元素具有box-sizing的情况下减去每个元素上的可能边框和填充：border-box。为了避免这种惩罚，使用.css（“height”）而不是.height（）。

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

文档准备VS Window.load

$(document).ready()在运行时的DOM准备JS，但它可能是图片还没有完成加载呢。使用$(window).load()解决了我的问题。 Read more。

我希望这会有所帮助。

Answer 3

一个跨浏览器的解决方案设置，通过jQuery的

使用这个属性： $(window).height()

这返回表示像素浏览器的可视屏幕高度的尺寸int值。

Answer 4

试试这个：

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

Answer 5

这是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。