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。