JavaScript Window Screen

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

屏幕对象

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

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

获取屏幕的宽度和高度

您可以使用 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 种颜色（2⁸）。

目前，大多数设备的屏幕颜色深度为 24 或 32。简单来说，更多的位会产生更多的颜色变化，比如 24 位可以产生 2²⁴ = 16,777,216 种颜色变化（true colors），而 32 位可以产生 2³² = 4,294,967,296 种颜色变化（deep colors）。

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

获取屏幕像素深度

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

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

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