JavaScript - Screen 对象

Window Screen 对象

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

屏幕对象属性

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

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

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

Screen 对象属性语法

按照下面的语法在 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 对象属性列表

下面，我们通过描述介绍了 'screen' 对象的所有属性。您需要使用 'screen' 作为引用来访问这些属性。

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

打印本页