JavaScript 屏幕

window.screen 对象包含有关用户屏幕的信息。

屏幕

这个window.screen可以在没有窗口前缀的情况下编写对象。

特性：

screen.width
screen.height
screen.availWidth
screen.availHeight
screen.colorDepth
screen.pixelDepth

屏幕宽度

这个screen.width属性返回访问者屏幕的宽度（以像素为单位）。

示例

显示屏幕的宽度（以像素为单位）：

document.getElementById("demo").innerHTML =
"Screen Width: " + screen.width;

结果将是：

亲自试一试 »

屏幕高度

这个screen.height属性返回访问者屏幕的高度（以像素为单位）。

示例

显示屏幕的高度（以像素为单位）：

document.getElementById("demo").innerHTML =
"Screen Height: " + screen.height;

结果将是：

亲自试一试 »

屏幕可用宽度

这个screen.availWidth属性返回访问者屏幕的宽度（以像素为单位）减去 Windows 任务栏等界面功能。

示例

显示屏幕的可用宽度（以像素为单位）：

document.getElementById("demo").innerHTML =
"Available Screen Width: " + screen.availWidth;

结果将是：

亲自试一试 »

屏幕可用高度

这个screen.availHeight属性返回访问者屏幕的高度（以像素为单位）减去 Windows 任务栏等界面功能。

示例

显示屏幕的可用高度（以像素为单位）：

document.getElementById("demo").innerHTML =
"Available Screen Height: " + screen.availHeight;

结果将是：

亲自试一试 »

屏幕颜色深度

这个screen.colorDepth属性返回用于显示一种颜色的位数。

所有现代计算机都使用 24 位或 32 位硬件来实现颜色分辨率：

24 位 = 16,777,216 个不同的 "True Colors"
32 位 = 4,294,967,296 个不同的 "Deep Colors"

较旧的计算机使用 16 位：65,536 种不同的 "High Colors" 分辨率。

非常旧的计算机和旧手机使用 8 位：256 个不同的 "VGA colors"。

示例

以位为单位显示屏幕的颜色深度：

document.getElementById("demo").innerHTML =
"Screen Color Depth: " + screen.colorDepth;

结果将是：

亲自试一试 »

HTML 中使用的 #rrggbb (rgb) 值代表 "True Colors"（16,777,216 种不同颜色）

窗口屏幕像素深度

这个screen.pixelDepth属性返回屏幕的像素深度。

示例

显示屏幕的像素深度（以位为单位）：

document.getElementById("demo").innerHTML =
"Screen Pixel Depth: " + screen.pixelDepth;

结果将是：

亲自试一试 »

对于现代计算机，颜色深度和像素深度是相等的。