JS屏幕对象screen – JavaScript教程

上一章JavaScript教程请查看：JS窗口对象window

在本教程中，你将了解JavaScript window screen对象。

屏幕对象screen

window.screen对象包含用户屏幕的分辨率(即屏幕的宽度和高度)、颜色深度、像素深度等信息。

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

获取屏幕的宽度和高度

你可以使用screen.width和screen.height属性获取用户屏幕的宽度和高度(以像素为单位)。下面的例子将显示你的屏幕分辨率:

<script>
function getResolution() {
    alert("你的屏幕: " + screen.width + "x" + screen.height);
}
</script>
 
<button type="button" onclick="getResolution();">获取</button>

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

screen.availWidth和screen.availHeight属性可用于获取浏览器在用户屏幕上使用时可用的宽度和高度(以像素为单位)。

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

<script>
function getAvailSize() {
    alert("可用屏幕的 - Width: " + screen.availWidth + ", Height: " + screen.availHeight);
}
</script>
 
<button type="button" onclick="getAvailSize();">获取可用大小</button>

获取屏幕颜色深度

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

颜色深度表示一个设备屏幕能够产生多少种颜色。例如，颜色深度为8的屏幕可以产生256种颜色(2^8种)。

目前，大多数设备的屏幕颜色深度为24或32。简单地说，更多的位产生更多的颜色变化，比如24位可以产生2^24 = 16,777,216种颜色变化(真颜色)，而32位可以产生2^32 = 4,294,967,296种颜色变化(深颜色)。

<script>
function getColorDepth() {
    alert("屏幕颜色深度: " + screen.colorDepth);
}
</script>
 
<button type="button" onclick="getColorDepth();">获取屏幕颜色深度</button>

提示：目前几乎所有的电脑和手机显示器都使用24位颜色深度，24位几乎总是使用每个R、G、b的8位，而在32位颜色深度的情况下，24位用于颜色，其余8位用于透明。

获取屏幕像素深度

你可以使用screen.pixelDepth数学获取屏幕的像素深度，像素深度是系统显示硬件每像素使用的比特数。

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

<script>
function getPixelDepth() {
    alert("屏幕像素深度s: " + screen.pixelDepth);
}
</script>
 
<button type="button" onclick="getPixelDepth();">获取屏幕像素深度</button>