JS「Window」width-height vs「screen」width-height？

我想知道一點，當我看這個代碼：JS「Window」width-height vs「screen」width-height？

// Get the screen height and width 
var maskHeight = $(document).height(); 
var maskWidth = $(window).width(); 

... 

// Get the window height and width 
var winH = $(window).height(); 
var winW = $(window).width();

是什麼$(document).height();和$(window).height();之間的區別？

來源

2011-06-06 Jeff

$(document).height是視口的內部區域，基本上從工具欄/網址欄的底部到狀態欄/底部滾動條/窗口的底部。 $(window).height獲取窗口的整個高度，包括地址欄和滾動條等。

來源

2011-06-06 17:27:13 tj111

謝謝！只是喜歡你們的速度！：P – Jeff 2011-06-06 17:47:10

我不確定這是否正確，我得到兩個相同的值。看到我下面的jsFiddle。 – jackrugile 2011-06-06 17:52:28

這是錯誤的。文檔高度是整個文檔的高度，即使您需要向下滾動並查看窗口以外的部分。窗口高度是視口高度。對於非滾動視圖，這些可能是相同的。 – keithhackbarth 2012-09-26 20:54:09

窗口是頂級客戶端對象，其中包含文檔。這的jsfiddle表明，無論$(window).height()和$(document).height()返回相同的值：http://jsfiddle.net/jackrugile/5xSuv/

窗口是視口的大小，不包括任何的鉻或瀏覽器界面的，如果我沒有記錯。我相信兩者的價值總是相同的，除非你在窗口中引用像iframe的東西。

來源

2011-06-06 17:48:40 jackrugile

這實際上是正確的。我投票刪除了我的答案，所以它不會混淆未來的人。 – tj111 2011-06-08 18:40:10

高度和寬度之後的開合括號很重要。它不像screen.width。 :) – 2016-11-16 08:46:29

@jackrugile的jsfiddle代碼返回文檔和窗口的相同值，因爲jsfiddle代碼在iframe中運行。

爲了讓事情如果沒有運行內部框架更加清晰 -

$（窗口）.height（）將返回但不包括任何當前頁面上的工具欄的高度視口區域的高度。在這裏可以通過打開firebug控制檯（如果是firefox）或谷歌瀏覽器控制檯按F12鍵並激發$（window）.height（）來實驗，如果從瀏覽器添加/刪除任何工具欄，或者只是簡單地更改螢火蟲或鉻調試器的高度。

它總是會返回瀏覽器窗口的高度，減去所有工具欄的高度。
$（document）.height（）將返回頁面內容的高度，頁面的長度。
工具欄或瀏覽器窗口的高度（如果重新調整或不調整）不會影響其值。
在發佈我的答案之前，它在Chrome中是2407，Firefox中是2410。

希望它有幫助，使事情更清楚。

來源

2012-06-10 20:42:27

屏幕 - 您的屏幕：尺寸值隨您的顯示器尺寸而變化。

screen.availWidth //There is no screen.height

窗口或文檔 - 瀏覽器的窗口（瀏覽器窗口，不包括工具欄和滾動條）。如果頁面是可滾動的，則忽略不可見的可滾動部分。使用IE9及以上版本的「窗口」，它很簡單。

window.innerHeight //IE9, Chrome, Safari, Firefox 
document.documentElement(or body).clientHeight //IE 8,7,6,5

注意：窗口和文檔是不一樣的。文檔對象（來自DOM）是Window對象（來自BOM）的屬性。但是給出相同的尺寸。從W3Schools，我想認爲'窗口'是新瀏覽器版本（IE9，Chrome，Firefox等）的符號，'文檔'是IE 8,7,6,5。

http://www.w3schools.com/js/js_window.asp，並且還在不同大小的監視器上用簡單的aspx頁面測試了上述內容。

來源

2013-08-19 21:44:46 Gadam

JS「Window」width-height vs「screen」width-height？

回答

相關問題