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

Question

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

1. console.debug（“屏幕高度=”+ 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。

Answer 2

想纠正 @jigfox的答案中所述的内容：

https://www.w3schools.com/jsref/prop_screen_availheight.asp#:~:text=The%20availHeight%20property%20returns%20the,）％2C％20use％20the％20availWidth％20property。

availHeight 属性返回用户屏幕的高度（以像素为单位），减去Windows任务栏之类的界面功能。

提示：要获取屏幕的高度（Windows任务栏除外），请使用availHeight属性。