javascript - screen.availHeight 和 window.height() 的区别

Question

我正在我的浏览器 (Firefox) 上执行以下 Javascript。

1. console.debug("屏幕高度 = "+ screen.availHeight);//输出770

2. console.debug("窗口高度="+ $(window).height());//输出210(我也在用jQuery)

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

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

Answer 1

window.outerHeight

它是窗口在屏幕上的高度，它包括页面和所有可见的浏览器栏(位置、状态、书签、窗口标题、边框……)。

这不与 jQuery 的 $(window).outerHeight() 相同。

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

它是显示网站的视口(viewport)高度，只有内容，没有浏览器栏。

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

这是视口(viewport)中显示的文档的高度。如果它高于 $(window).height()，您将获得用于滚动文档的滚动条。

screen.availHeight

这是浏览器窗口在最大化时可以拥有的高度，包括浏览器的栏。所以当窗口最大化时，screen.availHeight === window.outerHeight

屏幕高度

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

screen.availHeight 等于 [screen.height + 操作系统的栏]，例如 Windows 上的任务栏、OS X 上的停靠栏和菜单，等等如果您使用的是 Linux，则固定在屏幕的顶部或底部。