JavaScript - 屏幕对象

窗口屏幕对象

在 JavaScript 中，screen 对象是 'window' 对象的一个属性。'screen' 对象的属性包含有关设备屏幕的信息。可以使用 window.screen 语法访问 screen 对象。也可以不使用 window 对象来访问它。

屏幕对象属性

screen 对象有很多属性，可以提供有关屏幕方向、分辨率等的详细信息。这些属性可用于开发对不同屏幕尺寸和方向做出响应的应用程序。

以下是 JavaScript screen 对象的一些属性：

width - 屏幕宽度（以像素为单位）。
height - 屏幕高度（以像素为单位）。
availWidth - 屏幕宽度，减去窗口任务栏的宽度。
availHeight - 屏幕高度，减去窗口任务栏的高度。
colorDepth - 屏幕可以显示的每像素位数。
pixelDepth - 屏幕实际使用的每像素位数。

屏幕对象属性语法

请遵循以下语法在 JavaScript 中使用 screen 对象的属性：

window.screen.property;
OR
screen.property;

您可以选择是否使用 'window' 对象来访问 screen 对象。

示例

在下面的示例中，我们通过将 screen 作为 window 对象的属性来访问 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: 1536

示例

在下面的代码中，我们访问 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

请注意，在以上两个示例中，我们获得了有关屏幕的相同信息。

屏幕对象属性列表

下面，我们介绍了 'screen' 对象的所有属性及其说明。您需要使用 'screen' 作为引用来访问这些属性。

属性	描述
availHeight	它给出屏幕高度，不包括任务栏。
availWidth	它给出屏幕宽度，不包括任务栏。
colorDepth	它给出用于显示图像的颜色调色板深度。
height	它返回屏幕的总高度。
pixelDepth	它用于获取屏幕的颜色分辨率。
width	获取屏幕的总宽度。

打印页面