JS“Window”width-height vs“screen”width-height？

我想知道一点，当我看这个代码：JS“Window”width-height vs“screen”width-height？

// 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();之间的区别？

来源

2011-06-06 Jeff

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

来源

2011-06-06 17:27:13 tj111

谢谢！只是喜欢你们的速度！：P – Jeff 2011-06-06 17:47:10

我不确定这是否正确，我得到两个相同的值。看到我下面的jsFiddle。 – jackrugile 2011-06-06 17:52:28

这是错误的。文档高度是整个文档的高度，即使您需要向下滚动并查看窗口以外的部分。窗口高度是视口高度。对于非滚动视图，这些可能是相同的。 – keithhackbarth 2012-09-26 20:54:09

窗口是顶级客户端对象，其中包含文档。这的jsfiddle表明，无论$(window).height()和$(document).height()返回相同的值：http://jsfiddle.net/jackrugile/5xSuv/

窗口是视口的大小，不包括任何的铬或浏览器界面的，如果我没有记错。我相信两者的价值总是相同的，除非你在窗口中引用像iframe的东西。

来源

2011-06-06 17:48:40 jackrugile

这实际上是正确的。我投票删除了我的答案，所以它不会混淆未来的人。 – tj111 2011-06-08 18:40:10

高度和宽度之后的开合括号很重要。它不像screen.width。 :) – 2016-11-16 08:46:29

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

为了让事情如果没有运行内部框架更加清晰 -

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

它总是会返回浏览器窗口的高度，减去所有工具栏的高度。
$（document）.height（）将返回页面内容的高度，页面的长度。
工具栏或浏览器窗口的高度（如果重新调整或不调整）不会影响其值。
在发布我的答案之前，它在Chrome中是2407，Firefox中是2410。

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

来源

2012-06-10 20:42:27

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

screen.availWidth //There is no screen.height

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

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

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

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

来源

2013-08-19 21:44:46 Gadam

JS“Window”width-height vs“screen”width-height？

回答

相关问题