在 JavaScript 中，屏幕对象是 window 对象的一个属性。屏幕对象的属性包含有关设备屏幕的信息。可以通过 window.screen 语法来访问屏幕对象。我们也可以不使用 window 对象来直接访问它。
屏幕对象属性
屏幕对象有许多属性提供关于屏幕的方向、分辨率等信息。这些属性可以用来开发能够响应不同屏幕大小和方向的应用程序。
以下是 JavaScript 屏幕对象的一些属性：
-
-
-
availWidth - 屏幕的宽度减去窗口任务栏的宽度。
-
availHeight - 屏幕的高度减去窗口任务栏的高度。
-
colorDepth - 屏幕可以显示的颜色深度（每像素位数）。
-
pixelDepth - 屏幕实际使用的颜色深度（每像素位数）。
屏幕对象属性语法
在 JavaScript 中使用屏幕对象的属性时，请遵循以下语法：
window.screen.property;
或者
screen.property;
您可以使用或不使用 window 对象来访问屏幕对象。
示例
在下面的例子中，我们通过将屏幕作为 window 对象的属性来访问屏幕对象的各种属性。
<html>
<body>
<p> 屏幕信息 </p>
<div id="output"> </div>
<script>
document.getElementById("output").innerHTML =
"屏幕高度: " + window.screen.height + "<br>" +
"屏幕宽度: " + window.screen.width + "<br>" +
"屏幕颜色深度: " + window.screen.colorDepth + "<br>" +
"屏幕像素深度: " + window.screen.pixelDepth + "<br>" +
"屏幕可用高度: " + window.screen.availHeight + "<br>" +
"屏幕可用宽度: " + window.screen.availWidth;
</script>
</body>
</html>
输出：
屏幕信息
屏幕高度: 864
屏幕宽度: 1536
屏幕颜色深度: 24
屏幕像素深度: 24
屏幕可用高度: 816
屏幕可用宽度: 1536
示例
在下面的代码中，我们访问屏幕对象的各种属性并观察它们的值。在这个例子中，我们没有引用 window 对象来访问屏幕对象。
<html>
<body>
<p> 屏幕信息 </p>
<div id="output"> </div>
<script>
document.getElementById("output").innerHTML =
"屏幕高度: " + screen.height + "<br>" +
"屏幕宽度: " + screen.width + "<br>" +
"屏幕颜色深度: " + screen.colorDepth + "<br>" +
"屏幕像素深度: " + screen.pixelDepth + "<br>" +
"屏幕可用高度: " + screen.availHeight + "<br>" +
"屏幕可用宽度: " + screen.availWidth;
</script>
</body>
</html>
输出：
屏幕信息
屏幕高度: 864
屏幕宽度: 1536
屏幕颜色深度: 24
屏幕像素深度: 24
屏幕可用高度: 816
屏幕可用宽度: 1536
请注意，在上面两个例子中我们得到了相同的信息。
通过我们的 JavaScript 认证课程，通过真实项目深入学习 JavaScript。报名并成为认证专家，提升您的职业生涯。
屏幕对象属性列表
下面，我们覆盖了所有 screen 对象的属性及其描述。您需要使用 screen 作为参考来访问这些属性。
| 属性 |
描述 |
| availHeight |
不包括任务栏的情况下提供屏幕的高度。 |
| availWidth |
不包括任务栏的情况下提供屏幕的宽度。 |
| colorDepth |
提供用于显示图像的颜色调色板的深度。 |
| height |
返回屏幕的总高度。 |
| pixelDepth |
用于获取屏幕的颜色分辨率。 |
| width |
获取屏幕的总宽度。 |