JavaScript 窗口屏幕

在本教程中，你将了解 JavaScript 窗口屏幕对象。

屏幕对象

window.screen 对象包含有关用户屏幕的信息，例如分辨率（即屏幕的宽度和高度）、颜色深度、像素深度等。

由于 window 对象位于作用域链的顶部，因此 window.screen 可以在不指定 window. 前缀的情况下访问对象的属性，例如 window.screen.width 可以写为 screen.width 。以下部分将向你展示如何使用窗口对象的 screen object 属性获取用户显示的信息。

获得屏幕的宽度和高度

你可以使用 screen.width 和 screen.height 属性获取用户屏幕的宽度和高度（以像素为单位）。以下示例将在单击按钮时显示你的屏幕分辨率：

<script>
function getResolution() {
    alert("Your screen is: " + screen.width + "x" + screen.height);
}
</script>
 
<button type="button" onclick="getResolution();">Get Resolution</button>

获取屏幕的可用宽度和高度

screen.availWidth 和 screen.availHeight 属性可用于获取用户的屏幕上提供给浏览器使用的宽度和高度，以像素为单位。

屏幕的可用宽度和高度等于屏幕的实际宽度和高度减去界面功能的宽度和高度，如 Windows 中的任务栏。这是一个例子：

<script>
function getAvailSize() {
    alert("Available Screen Width: " + screen.availWidth + ", Height: " + screen.availHeight);
}
</script>
 
<button type="button" onclick="getAvailSize();">Get Available Size</button>

获得屏幕颜色深度

你可以使用 screen.colorDepth 属性来获取用户屏幕的颜色深度。颜色深度是用于表示单个像素的颜色的位数。

颜色深度表示设备屏幕能够生成多少种颜色。例如，颜色深度为 8 的屏幕可以产生 256 种颜色（28）。

目前，大多数设备的屏幕颜色深度为 24 或 32，简单来说，更多位会产生更多颜色变化，如 24 位可产生 224 = 16,777,216 种颜色变化（真彩色），而 32 位可产生 232 = 4,294,967,296 种颜色变化（深色）。

<script>
function getColorDepth() {
    alert("Your screen color depth is: " + screen.colorDepth);
}
</script>
 
<button type="button" onclick="getColorDepth();">Get Color Depth</button>

提示： 截至目前，几乎每台计算机和手机显示屏都使用 24 位色深。24 位几乎总是使用 R,G,B 中的每一个的 8 位。而在 32 位颜色深度的情况下，24 位用于颜色，剩余的 8 位用于透明度。

获得屏幕像素深度

你可以使用 screen.pixelDepth 属性获取屏幕的像素深度。像素深度是系统显示硬件每个像素使用的位数。

对于现代设备，颜色深度和像素深度相等。这是一个例子：

<script>
function getPixelDepth() {
    alert("Your screen pixel depth is: " + screen.pixelDepth);
}
</script>
 
<button type="button" onclick="getPixelDepth();">Get Pixel Depth</button>