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

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

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

Answer 2

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

Answer 3

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

如果不运行 iframe，为了使事情更清楚 -

• $(window).height() 将返回视口区域的高度，不包括页面上存在的任何工具栏的高度。 可以通过打开萤火虫控制台（如果是 firefox）或 google chrome 控制台按 F12 键并触发 $(window).height() 来进行同样的实验，如果从浏览器中添加/删除任何工具栏或只是更改firebug 或 chrome 调试器的高度。
  
  它总是返回浏览器的高度 window 减去所有工具栏的高度。
  
  
• $(document).height() 将返回页面内容的高度，即页面的长度。
  工具栏或浏览器 window 的高度（无论是否调整大小）不会影响其值。
  在发布我的答案之前，chrome 大约是 2407，firefox 大约是 2410。

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

Answer 4

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

screen.availWidth  //There is no screen.height 

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

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

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

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