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(); 和 $(window).height(); 之间有什么区别？
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();?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
窗口是顶级客户端对象，其中包含文档。此 jsFiddle 显示
$(window).height()和$(document).height()返回相同的值： http://jsfiddle.net/jackrugile/5xSuv/窗口是视口的大小，不包括任何 chrome 或浏览器界面，如果我没记错的话。我相信两者的值将始终相同，除非您引用窗口内的 iframe 之类的内容。
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/jackrugile/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.
$(document).height是视口的内部区域，基本上是从工具栏/URL 栏的底部到状态栏/底部滚动条/窗口底部。$(window).height获取窗口的整个高度，包括地址栏和滚动条等内容。$(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.@jackrugile 的 jsfiddle 代码为文档和窗口返回相同的值，因为 jsfiddle 代码在 iframe 内运行。
为了让事情更清楚，如果不运行 Iframe -
它将始终返回浏览器窗口的高度减去所有工具栏的高度。
工具栏或浏览器窗口的高度（无论是否调整大小）不会影响其值。
在发布我的答案之前，chrome 中的值约为 2407，firefox 中的值约为 2410。
希望它能有所帮助并使事情变得更加清晰。
The jsfiddle code by @jackrugile returns the same values for document and window because the jsfiddle code is running inside an iframe.
To make things more clear if not running Iframes -
It will always return the height of your browser window substracting the height of all toolbars.
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.
Hope it helps and make things more clear.
屏幕 -- 您的屏幕：尺寸值随显示器尺寸而变化。
窗口或文档——浏览器的窗口（浏览器视口，不包括工具栏和滚动条）。如果页面可滚动，则忽略不可见的可滚动部分。 IE9及以上版本使用“window”，很简单。
注意：窗口和文档并不相同。文档对象（来自 DOM）是 Window 对象（来自 BOM）的属性。但给出相同的尺寸。
从 W3Schools 来看，我认为“Window”是新浏览器版本（IE9、Chrome、Firefox 等）的表示法，“document”是 IE 8、7、6、5 的表示法。
http://www.w3schools.com/js/js_window.asp，并且还经过测试上面是在不同尺寸的显示器上使用一个简单的 aspx 页面。
Screen -- Your screen: size value changes with your monitor size.
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.
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.
http://www.w3schools.com/js/js_window.asp, and also tested the above with a simple aspx page on differently sized monitors.