screen.availHeight和window.height（）之间的区别

我在我的浏览器（Firefox）上执行以下Javascript。

1. console.debug（“Screen height =”+ screen.availHeight ）; //输出770

2. console.debug（“Window Height =”+ $（window）.height（） ）; //输出210 （我也使用jQuery）

两者有什么区别？ 770像素和210毫米？

同样，当我写$(document).height()和$(window).height() ，有一个区别。 是什么原因？

Answer 1

window.outerHeight

它是屏幕上的窗口的高度，它包括页面和所有可见的浏览器的酒吧（位置，状态，书签，窗口标题，边框，…）。

这与jQuery的$(window).outerHeight() 。

window.innerHeight或$(window).height()

显示网站的视口的高度，只是内容，没有浏览器的酒吧。

document.body.clientHeight或$(document).height()

这是您的文档在视口中显示的高度。 如果它高于$(window).height()你会得到滚动条来滚动文档。

screen.availHeight

如果浏览器的窗口最大化，那么浏览器的窗口就可以达到这个高度，包括浏览器的酒吧。 所以当窗口最大化时， screen.availHeight === window.outerHeight

screen.height

它只是匹配屏幕的分辨率。 所以在1920×1080屏幕上， screen.height将会是1080 。

screen.availHeight等于[ screen.height +操作系统的酒吧]，就像Windows上的任务栏，OS X上的停靠栏和菜单，或者如果您使用的是Linux，屏幕顶部或底部都会固定。