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

【问题标题】：JS "Window" width-height vs "screen" width-height?JS“窗口”宽度高度与“屏幕”宽度高度？
【发布时间】：2011-09-09 11:39:21
【问题描述】：

当我看到这段代码时，我有点纳闷：

// 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(); 有什么区别？

【问题讨论】：

标签： javascript jquery window screen document

【解决方案1】：

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

如果我没记错的话，Window 是视口的大小，不包括任何 chrome 或浏览器界面。我相信两者的值将始终相同，除非您在窗口中引用 iframe 之类的东西。

【讨论】：

这实际上是正确的。我投票删除了我的答案，以免将来混淆。
height 和 width 后面的左括号和右括号很重要。它不像screen.width。 :)

【解决方案2】：

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

【讨论】：

谢谢！就是喜欢你们的速度！ :P
我不确定这是否正确，我得到的两个值相同。请参阅下面的我的 jsFiddle。
这是错误的。文档高度是整个文档的高度，甚至是您必须向下滚动才能看到的窗口之外的部分。窗口高度是视口高度。对于非滚动视图，这些可能是相同的。

【解决方案3】：

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

如果不运行 iframe，让事情更清楚 -

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

它将始终返回浏览器窗口的高度减去所有工具栏的高度。
$(document).height() 将返回页面内容的高度，即页面的长度。
工具栏或浏览器窗口的高度（无论是否调整大小）都不会影响它的价值。
在发布我的答案之前，chrome 大约是 2407，firefox 大约是 2410。

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

【讨论】：

【解决方案4】：

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

screen.availWidth  //There is no screen.height

窗口或文档 -- 浏览器的窗口（浏览器视口，不包括工具栏和滚动条）。如果页面可滚动，则忽略不可见的可滚动部分。 IE9及以上版本使用'window'，很简单。

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

注意：Window 和 Document 不一样。 Document 对象（来自 DOM）是 Window 对象（来自 BOM）的属性。但是给出相同的尺寸。在 W3Schools 中，我认为“Window”是新浏览器版本（IE9、Chrome、Firefox 等）的符号，而“document”是 IE 8、7、6、5 的符号。

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

【讨论】：