Javascript 简明教程
JavaScript - Screen Object
Window Screen Object
JavaScript 中的 screen 对象是 'window' 对象的一个属性。“screen” 对象的属性包含关于设备屏幕的信息。可以通过使用 window.screen 语法访问 screen 对象。我们也可以在不使用 window 对象的情况下访问它。
Screen Object Properties
screen 对象有许多属性，这些属性提供有关屏幕方向、分辨率等等的信息。这些属性可以用来开发响应不同的屏幕大小和方向的应用程序。
以下是 JavaScript screen 对象的一些属性 −
-
width − 屏幕宽度（以像素为单位）。
-
height − 屏幕高度（以像素为单位）。
-
availWidth − 屏幕宽度，减去窗口任务栏的宽度。
-
availHeight − 屏幕高度，减去窗口任务栏的高度。
-
colorDepth − 屏幕可以显示的每像素位数。
-
pixelDepth − 屏幕实际使用的每像素位数。
Screen Object Property Syntax
按照下面的语法在 JavaScript 中使用 screen 对象的属性 −
window.screen.property;
OR
screen.property;你可以也可以不使用 'window' 对象来访问 screen 对象。
Example
在下面的示例中，我们通过将 screen 作为 window 对象的属性来引用 screen 访问 screen 对象的各种属性。
<html>
<body>
<p> Screen Information </p>
<div id = "output"> </div>
<script>
document.getElementById("output").innerHTML =
"screen height: " + window.screen.height + "<br>" +
"screen width: " + window.screen.width + "<br>" +
"screen colorDepth: " + window.screen.colorDepth + "<br>" +
"screen pixelDepth: " + window.screen.pixelDepth + "<br>" +
"screen availHeight: " + window.screen.availHeight + "<br>" +
"screen availWidth: " + window.screen.availWidth;
</script>
</body>
</html>Screen Information
screen height: 864
screen width: 1536
screen colorDepth: 24
screen pixelDepth: 24
screen availHeight: 816
screen availWidth: 1536Example
在下面的代码中，我们访问 screen 对象的各种属性并观察它们的值。在这个示例中，我们没有引用 window 对象来访问 screen 对象。
<html>
<body>
<p> Screen Information </p>
<div id = "output"> </div>
<script>
document.getElementById("output").innerHTML =
"screen height: " + screen.height + "<br>" +
"screen width: " + screen.width + "<br>" +
"screen colorDepth: " + screen.colorDepth + "<br>" +
"screen pixelDepth: " + screen.pixelDepth + "<br>" +
"screen availHeight: " + screen.availHeight + "<br>" +
"screen availWidth: " + screen.availWidth;
</script>
</body>
</html>Screen Information
screen height: 864
screen width: 1536
screen colorDepth: 24
screen pixelDepth: 24
screen availHeight: 816
screen availWidth: 1536请注意，在以上两个示例中，我们得到了有关屏幕的相同信息。