JavaScript - Screen 对象

Window Screen 对象

JavaScript 中的 screen 对象是"window"对象的一个​​属性。"screen"对象的属性包含有关设备屏幕的信息。可以使用 window.screen 语法访问 screen 对象。我们也可以在不使用 window 对象的情况下访问它。

Screen 对象属性

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

以下是 JavaScript 屏幕对象的一些属性 -

• width - 屏幕宽度(以像素为单位)。

• height - 屏幕高度(以像素为单位)。

• availWidth - 屏幕宽度减去窗口任务栏宽度。

• availHeight - 屏幕高度减去窗口任务栏高度。

• colorDepth - 屏幕可显示的每像素位数。

• pixelDepth - 屏幕实际显示的每像素位数使用。

屏幕对象属性语法

请按照以下语法在 JavaScript 中使用屏幕对象的属性 -

window.screen.property;
或
screen.property;

您可以使用或不使用"window"对象来访问屏幕对象。

示例

在下面的示例中，我们通过将 screen 作为 window 对象的属性来引用，来访问屏幕对象的各种属性。

<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"作为引用来访问这些属性。