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

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

$(document).height是视口的内部区域，本质上是从工具栏/url栏的底部到状态栏/底部滚动条/窗口的底部。$(window).height获取窗口的整个高度，包括地址栏和滚动条之类的内容。

Answer 2

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

Window是视窗的大小，如果我没记错的话，它不包括任何chrome或浏览器界面。我相信两者的值总是相同的，除非你在一个窗口中引用了像iframe这样的东西。

Answer 3

jsfiddle代码由@jackrugile为document和window返回相同的值，因为jsfiddle代码在iframe中运行。

为了让事情变得更清楚，如果不运行Iframes -

• $(window).height()将返回视区区域的高度，不包括页面上存在的任何工具栏的高度。在这里可以通过打开firebug控制台(如果是firefox)或google chrome控制台，按F12键并触发$(window).height()来进行同样的实验，如果从浏览器中添加/删除任何工具栏，或者只是简单地更改firebug或chrome调试器的高度，都会发生变化。

它总是返回浏览器窗口的高度减去所有工具栏的高度。

• $(document).height()将返回您的页面内容的高度，您的页面is.The工具栏或浏览器窗口的高度(如果重新调整大小或未调整)多长时间不会影响它的值。

在发布我的答案之前，chrome大约是2407，火狐是2410。

希望能有所帮助，让事情变得更清晰。