Question

当我看到这段代码时，我想知道一点：

// 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();之间的区别是什么？

Answer 1

Window是顶级客户端对象，包含文档。这个jsFiddle显示$(window).height()和$(document).height()都返回相同的值：http://jsfiddle.net/jackrugile/5xSuv/

窗口是视口的大小，如果我没有弄错的话，它不包含任何chrome或浏览器界面。我相信两者的值将始终相同，除非您在窗口中引用类似iframe的内容。

Answer 2

$(document).height是视口的内部区域，主要是从工具栏/网址栏的底部到状态栏/底部滚动条/窗口底部。 $(window).height获取窗口的整个高度，包括地址栏和滚动条等。

Answer 3

@jackrugile的jsfiddle代码返回文档和窗口的相同值，因为jsfiddle代码在iframe中运行。

如果没有运行Iframes，那就更清楚了 -

$（window）.height（）将返回视口区域的高度，不包括页面上任何工具栏的高度。这可以通过打开一个firebug控制台（如果firefox）或谷歌chrome控制台按F12键并触发$（window）.height（）来实验，如果从浏览器添加/删除任何工具栏或只是更改萤火虫或铬调试器的高度。

它总是会返回浏览器窗口的高度，减去所有工具栏的高度。
$（document）.height（）将返回页面内容的高度，页面的长度。
工具栏或浏览器窗口的高度（如果是否重新调整大小）不会影响它的值。
在发布我的答案之前，它在chrome中大约是2407，在firefox中是2410。

希望它有所帮助并使事情更加清晰。

Answer 4

屏幕 - 您的屏幕：尺寸值会随显示器尺寸而变化。

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，我想认为'Window'是新浏览器版本（IE9，Chrome，Firefox等）的符号，'document'适用于IE 8,7,6,5。

http://www.w3schools.com/js/js_window.asp，并在不同大小的显示器上使用简单的aspx页面测试了上述内容。

JS“窗口”宽度 - 高度与“屏幕”宽度 - 高度？

4 个答案: