屏幕和窗口属性之间的区别？

Question

在我的 Web 应用程序中，我需要使用浏览器窗口的高度和宽度。所以我在 JavaScript 中使用 Screen.Width , Screen.Height 属性来获取宽度和高度。在冲浪时，我得到了另一个属性，即 Window.Width 、 Window.Height。谁能告诉我，哪个属性给了我浏览器窗口的大小.....屏幕（或）窗口？

Answer 1

screen 实际上是window.screen，因为window 是全局变量的上下文。

window 对象（通过document.defaultView 获得）返回有关窗口和视口的信息。获取应用程序窗口大小使用window.outerHeight，获取视口大小使用window.innerHeight。

screen 对象指的是实际的监视器窗口或桌面大小。请注意，如果您有一个多监视器设置，那么您将有多个 screen 对象。一个window 对象属于一个screen，虽然不是很window 属于同一个screen。我不知道当一个浏览器窗口跨越多个screens 时会发生什么。

从这一切中，您可以确定如果您运行的是全屏浏览器，那么window.outerHeight == window.innerHeight == screen.height。

来源：https://developer.mozilla.org/en-US/docs/DOM/window.screen 和 https://developer.mozilla.org/en-US/docs/DOM/window

Answer 2

window.screen.height

window.screen.width

屏幕或显示器的高度/宽度，以像素为单位

window.screen.availHeight

window.screen.availWidth

屏幕或显示器的高度/宽度，以像素为单位，减去操作系统显示的永久或半永久用户界面功能，例如 Windows 上的任务栏或智能手机上的设备状态栏

window.innerHeight

window.innerWidth

浏览器窗口内容区域的高度/宽度，包括水平/垂直滚动条（如果呈现）

window.outerHeight

window.outerWidth

浏览器窗口外部的高度/宽度

Answer 3

What is the difference between window, screen, and document in Javascript? 几乎是同一个问题。解释接受的答案并添加一些我认为可以使用的信息：

window 在根对象中。您定义的任何变量或函数在某种程度上都是window 对象的子对象。因此，如果您在脚本标记中执行 var something="blah"，您以后可以通过 3 种方式访问​​该变量 - something、window.something 或 window["something"]。

screen 是浏览器创建的 window 的子级之一。但是，出于同样的原因，您可以将window.something 访问为something，您可以使用window.screen 或screen 访问它。这包含实际屏幕的属性，我会在其中获取您想要的详细信息（除非您可以访问 jQuery 或 Prototype 之类的框架，在这种情况下，他们可能会为您提供这些信息而无需担心浏览器兼容性)。