要獲取屏幕分辨率和顏色深度，使用window.screen對象。屏幕分辨率通過screen.width和screen.height獲取，表示物理像素尺寸；可用區域分辨率通過screen.availwidth和screen.availheight獲取，排除系統界面占用空間；顏色深度用screen.colordepth，像素深度用screen.pixeldepth，現代瀏覽器中通常都為24位；實際應用中應注意設備像素與css像素的差異、用戶縮放不影響screen屬性、布局應優先考慮視口而非screen對象。
在瀏覽器環境（bom）中，要獲取用戶的屏幕分辨率和顏色深度，我們主要依賴于window.screen這個全局對象。它提供了關于用戶屏幕的一些基本信息，比如物理尺寸和顯示能力。
在JavaScript中，你可以這樣獲取這些信息：
// 獲取屏幕寬度（像素） const screenWidth = window.screen.width; // 獲取屏幕高度（像素） const screenHeight = window.screen.height; // 獲取顏色深度（每像素的比特數） const colorDepth = window.screen.colorDepth; // 獲取像素深度（每像素的比特數，通常與colorDepth相同） const pixelDepth = window.screen.pixelDepth; console.log(`屏幕分辨率: ${screenWidth}x${screenHeight}`); console.log(`顏色深度: ${colorDepth} 位`); console.log(`像素深度: ${pixelDepth} 位`);
這幾行代碼簡單直接，就能讓你拿到這些看似基礎卻在某些場景下非常有用的數據。
屏幕分辨率和可用區域有什么區別？
談到屏幕尺寸，很多人第一反應就是“我的屏幕是1920×1080”。沒錯，這通常就是screen.width和screen.height給出的數值。但這里有個微妙的差別，也是我個人在開發中經常需要區分的：屏幕的“總分辨率”和“可用區域分辨率”。
screen.width和screen.height反映的是用戶顯示器的物理像素尺寸。它就是你的顯示器能顯示的總像素點數。然而，你的操作系統，比如windows的任務欄、macos的Dock欄或菜單欄，它們會占據屏幕的一部分空間。這些系統界面雖然在你的顯示器上，但它們通常不屬于瀏覽器窗口可以自由使用的“可用”區域。
這就是screen.availWidth和screen.availHeight派上用場的地方。這兩個屬性返回的是屏幕上可用于應用程序窗口的最大寬度和高度，也就是說，它們排除了操作系統固定界面（如任務欄、Dock欄）所占據的空間。
舉個例子，我的筆記本屏幕是1920×1080，那么screen.width就是1920，screen.height就是1080。但如果我的Windows任務欄在底部占據了一點空間，那么screen.availHeight可能就不是1080，而是1040或更小。
在實際應用中，如果你想讓你的網頁或應用窗口最大化但不覆蓋系統任務欄，那么screen.availWidth和screen.availHeight會更有指導意義。但如果只是想了解用戶顯示器的物理能力，那還是看width和height。這兩種數據各有其用，取決于你到底想解決什么問題。
顏色深度和像素深度有什么區別？
這是一個經常被混淆，但實際上在現代瀏覽器中差異越來越小的問題。screen.colorDepth和screen.pixelDepth都表示屏幕上每個像素用于顯示顏色的比特數。
從歷史角度看，colorDepth是Netscape Navigator時代引入的，它通常反映的是顯示器或顯卡能夠支持的最大顏色位數。常見的有8位（256色）、16位（65536色，高彩）和24位（約1670萬色，真彩）。在現代瀏覽器和操作系統中，絕大多數用戶的colorDepth都會是24位，因為它已經足夠顯示絕大多數圖片和視頻的色彩信息，人眼也難以分辨24位和更高位數之間的差異。
pixelDepth則是一個后來加入的屬性，它理論上更準確地反映了實際用于渲染的每個像素的比特數。在很多情況下，pixelDepth的值會和colorDepth一樣，也都是24。但在一些特殊配置或高DPI（Retina）屏幕上，或者涉及到某些特定渲染管線時，它們可能會有所不同。例如，一些高端專業顯示器可能支持30位或36位色深，這時候pixelDepth可能會反映出更高的數值，盡管瀏覽器通常還是會按照24位來處理大部分內容。
對我個人而言，在日常開發中，我通常會認為這兩個值是等同的，都指向了屏幕能夠展現的色彩豐富度。除非你正在開發一個對色彩精確度有極高要求的應用（比如專業圖像處理軟件的Web版本），否則它們之間的細微差別通常不會對你的代碼邏輯產生太大影響。它們主要告訴我們，用戶屏幕的色彩表現力如何，這對于決定是否使用某些高級色彩模式或優化圖片加載策略時，可能會有點用。
在不同設備或瀏覽器中獲取屏幕信息有哪些需要注意的地方？
獲取屏幕信息看似簡單，但實際應用中，尤其是在當前這個設備碎片化的時代，還是有一些值得深思的“坑”和注意事項。
首先，最重要的一點：window.screen對象提供的是關于物理顯示器的信息，而不是瀏覽器視口（viewport）的信息。很多時候，我們更關心的是用戶瀏覽器窗口有多大，而不是他顯示器有多大。比如，用戶可能用一個很小的瀏覽器窗口瀏覽你的網站，即使他顯示器很大。這時，如果你根據screen.width來調整布局，那很可能就會出問題。對于響應式設計，我們更多依賴的是window.innerWidth、window.innerHeight以及css媒體查詢。
其次，高DPI（High-DPI）或Retina顯示屏的影響。在這些屏幕上，一個CSS像素可能對應多個物理像素。例如，window.devicePixelRatio可能是2或3。這意味著雖然screen.width可能顯示1920，但你的網頁內容實際上可能只占用了960個CSS像素的寬度（如果devicePixelRatio是2）。這一點對于圖片清晰度、字體渲染等至關重要。你不能簡單地認為screen.width就是你的設計基準，還需要結合devicePixelRatio來理解。
再來，就是用戶縮放。如果用戶在瀏覽器中進行了頁面縮放（Ctrl/Cmd + 或 -），screen.width和screen.height是不會變的，因為它們反映的是物理屏幕。但頁面內容的實際渲染尺寸會改變，這再次強調了screen對象與實際布局的關聯性較弱。
最后，考慮到隱私和安全，瀏覽器對screen對象的信息獲取通常沒有太多限制，因為它不涉及敏感的用戶數據。但總的來說，過度依賴screen對象進行布局或功能判斷，往往不如基于window.innerWidth/Height或更現代的Resize Observer API來得靈活和準確。screen對象更像是一個背景信息，用于了解用戶設備的一些基礎能力，比如在數據分析時了解用戶設備的大致分辨率分布，或者在全屏應用中調整渲染策略。但在絕大多數前端開發場景下，我們更關注的是瀏覽器視口和頁面內容的交互，而不是用戶顯示器的物理尺寸。
