Javascript 简明教程

JavaScript - Screen Object

Window Screen Object

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

The screen object in JavaScript is a property of the 'window' object. The 'screen' object’s properties contain information about the device’s screen. The screen object can be accessed by using the window.screen syntax. We can also access it without using the window object.

Screen Object Properties

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

The screen object has a number of properties that provide information about the screen’s orientation, resolution, and more. These properties can be used to develop applications that are responsive to different screen sizes and orientations.

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

Following are some properties of the JavaScript screen object −

width − The width of the screen in pixels.
height − The height of the screen in pixels.
availWidth − The width of the screen, minus the width of the window taskbar.
availHeight − The height of the screen, minus the height of the window taskbar.
colorDepth − The number of bits per pixel that the screen can display.
pixelDepth − The number of bits per pixel that the screen is actually using.

Screen Object Property Syntax

按照下面的语法在 JavaScript 中使用 screen 对象的属性 −

Follow the syntax below to use the property of the screen object in JavaScript −

window.screen.property;
OR
screen.property;

你可以也可以不使用 'window' 对象来访问 screen 对象。

You may or may not use the 'window' object to access the screen object.

Example

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

In the example below, we access the various properties of the screen object with referencing the screen as the property of window object.

<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

Example

在下面的代码中，我们访问 screen 对象的各种属性并观察它们的值。在这个示例中，我们没有引用 window 对象来访问 screen 对象。

In the below code, we access the various properties of the screen object and observe their value. In this example we are not referencing the window object to access the screen object.

<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

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

Please note that we get the same information about the screen in the above two examples.

Screen Object Properties List

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

Below, we have covered all properties of the 'screen' object with a description. You need to use the 'screen' as a reference to access these properties.

Property

Description

availHeight

It gives the height of the screen without including the taskbar.

availWidth

It gives the width of the screen without including the taskbar.

colorDepth

It gives the depth of the color palette to display images.

height

It returns the total height of the screen.

pixelDepth

It is used to get the color resolution of the screen.

width

To get the total width of the screen.