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>