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

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

// 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();什么区别$(document).height(); 和$(window).height(); ？

Answer 1

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

Answer 2

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

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

Answer 3

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

如果不运行Iframes可以使事情变得更清楚 –

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

  它将始终返回浏览器窗口的高度，从而减去所有工具栏的高度。

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

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

Answer 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 

注意 ：窗口和文档不一样。 文档对象（来自DOM）是Window对象的属性（来自BOM）。 但是给出相同的尺寸。 从W3Schools，我想认为’Window’是新浏览器版本（IE9，Chrome，Firefox等）的符号，’document’是IE 8,7,6,5。

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