javascript JS“窗口”宽高与“屏幕”宽高？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6255677/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JS "Window" width-height vs "screen" width-height?
提问by Jeff
I am wondering a little when I look at this code:
当我看到这段代码时，我有点想知道：
// 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();
What is the difference between $(document).height();and $(window).height();?
$(document).height();和 和有什么不一样$(window).height();？
采纳答案by TJ L
$(document).heightis the inside area of the viewport, essentially from the bottom of your toolbar/url bar to your status bar/bottom scroll bar/bottom of the window. The $(window).heightgets the entire height of the window, including things like the address bar and scroll bars.
$(document).height是视口的内部区域，基本上是从工具栏/网址栏的底部到状态栏/底部滚动条/窗口底部。在$(window).height获得窗口的整个高度，包括像在地址栏和滚动条。
回答by Hymanrugile
Window is the top level client side object, which contains the document. This jsFiddle shows that both $(window).height()and $(document).height()return the same value: http://jsfiddle.net/Hymanrugile/5xSuv/
Window 是顶级客户端对象，它包含文档。这的jsfiddle表明，无论$(window).height()和$(document).height()返回相同的值：http://jsfiddle.net/Hymanrugile/5xSuv/
Window is the size of the viewport and does not include any of the chrome or browser interface, if I am not mistaken. I believe that the values of both will always be the same, unless you are referencing something like an iframe within a window.
Window 是视口的大小，不包括任何 chrome 或浏览器界面，如果我没记错的话。我相信两者的值将始终相同，除非您在窗口中引用 iframe 之类的东西。
回答by Anmol Saraf
The jsfiddle code by @Hymanrugile returns the same values for document and window because the jsfiddle code is running inside an iframe.
@Hymanrugile 的 jsfiddle 代码为文档和窗口返回相同的值，因为 jsfiddle 代码在 iframe 内运行。
To make things more clear if not running Iframes -
如果不运行 iframe，为了使事情更清楚 -
- $(window).height() will return the height of the viewport area excluding the height of any of the toolbars present on the page. The same can be experimented here by opening a firebug console (if firefox) or google chrome console pressing F12 key and firing $(window).height() which will always vary if add / remove any of the toolbars from browser or simply change the height of the firebug or chrome debugger.
It will always return the height of your browser window substracting the height of all toolbars. - $(document).height() will return the height of your page contents, how long your page is.
The height of toolbars or browser window (if re-sized or not) doesn't affects it's value.
Before posting my answer it was around 2407 in chrome and 2410 in firefox.
- $(window).height() 将返回视口区域的高度，不包括页面上任何工具栏的高度。通过打开 firebug 控制台（如果是 firefox）或 google chrome 控制台按下 F12 键并触发 $(window).height()，如果从浏览器添加/删除任何工具栏或简单地更改firebug 或 chrome 调试器的高度。
它将始终返回浏览器窗口的高度减去所有工具栏的高度。 - $(document).height() 将返回您的页面内容的高度，您的页面有多长。
工具栏或浏览器窗口的高度（如果重新调整大小）不会影响其值。
在发布我的答案之前，chrome 约为 2407，firefox 约为 2410。
Hope it helps and make things more clear.
希望它有所帮助并使事情更清楚。
回答by Gadam
Screen-- Your screen: size value changes with your monitor size.
屏幕-- 您的屏幕：尺寸值随显示器尺寸而变化。
screen.availWidth //There is no screen.height
Window or Document-- The Browser's window (the browser viewport, NOT including toolbars and scrollbars). Ignores the invisible scrollable part if the page is scrollable. Use 'window' for IE9 and above, its simple.
窗口或文档——浏览器的窗口（浏览器视口，不包括工具栏和滚动条）。如果页面可滚动，则忽略不可见的可滚动部分。IE9及以上使用'window'，很简单。
window.innerHeight //IE9, Chrome, Safari, Firefox
document.documentElement(or body).clientHeight //IE 8,7,6,5
Note: Window and Document are not the same. Document object (from DOM) is a property of the Window object (from BOM). But give out the same size. From W3Schools, I would like to think that 'Window' is the notation for the new browser versions (IE9, Chrome, Firefox etc) and 'document' is for 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, and also tested the above with a simple aspx page on differently sized monitors.
http://www.w3schools.com/js/js_window.asp，并且还在不同尺寸的显示器上使用简单的 aspx 页面测试了上述内容。
