Chrome 將螢幕解析度回報為一組從瀏覽器的螢幕與視窗物件所取得的 CSS 像素值——具體來說是 screen.width、screen.height、screen.availWidth、screen.availHeight、window.innerWidth、window.innerHeight、window.outerWidth、window.outerHeight，以及 window.devicePixelRatio。這些數字描述的是瀏覽器向網頁內容公開的座標空間，而非面板的標示或原生像素數量，因此一般網頁無法直接從這個 API 介面讀取實體對角線、EDID 或校準過的 DPI。由於 Chrome 可能處於任意大小的視窗、貼齊桌面的一部分、與其他螢幕共用畫面，或在遠端工作階段中執行，這些數字僅僅是目前分頁實際看到的快照。Screen Resolution Checker 會以聚焦頁面的形式開啟，在本機讀取每個值，以淺白用語標示每個欄位，把 CSS 螢幕尺寸乘上 devicePixelRatio 以估算背後緩衝區的像素，並讓你複製純文字報告。不會上傳任何顯示器識別資訊、剪貼簿內容或尺寸，而且這個小工具刻意不會在造訪之間儲存任何歷史紀錄。
Chrome 所稱的螢幕解析度
當 Chrome 分頁詢問「螢幕解析度」時，它得到的答案是一組各自獨立的數字，而不是單一數字。每個數字回答的問題略有不同，而該分頁只能看到它目前所在的瀏覽器視窗和作業系統工作階段願意揭露的內容。把這些值混為一談，是 Chrome 數值與螢幕外盒規格表相比看起來「不對」最常見的原因。
第一組 screen.width 和 screen.height，回報的是 Chrome 目前視為主螢幕的顯示器或虛擬顯示器之完整 CSS 像素座標空間。第二組 screen.availWidth 和 screen.availHeight，是同一座標空間扣掉作業系統保留的區域——Windows 工作列、macOS 選單列、固定的面板，或 Chrome OS 的架子，都可能各自縮減可用區域。第三組 window.innerWidth 和 window.innerHeight，是視埠(viewport)——也就是瀏覽器外殼內部實際繪製版面的矩形。第四組 window.outerWidth 和 window.outerHeight，是整個瀏覽器視窗，包括其標題列、分頁、側邊面板、開發者工具和平台裝飾。最後，window.devicePixelRatio 是 Chrome 想要對 CSS 像素背後更高解析度緩衝區進行定址時所用的倍數。
這九個值中，沒有一個單獨代表面板原生的可定址像素數。面板標示的解析度屬於硬體特性，藏在 EDID、類似 EDID 的延伸，以及 GPU 輸出模式背後——一般網頁無法讀取這些介面。Chrome 的數字是 Chrome 現在願意告訴網頁的有關其座標環境的內容。
如何在 Chrome 中檢查螢幕解析度
- 在 Chrome 分頁中開啟 Screen Resolution Checker，讓頁面能夠讀取自己的視窗與螢幕值，而不會受到其他內容造成版面位移的干擾。
- 閱讀頁面上標示清楚的欄位:完整 CSS 螢幕、可用螢幕區域、目前視埠、外部瀏覽器視窗、裝置像素比，以及估算的裝置像素相乘值。請把每個值都視為來自這個瀏覽器、這個視窗、這台顯示器、這個當下的本機快照。
- 當你想要比較不同條件時，可以調整 Chrome 視窗大小或拖曳到不同尺寸或不同螢幕。視埠與外部視窗數值會在 resize 事件時更新;CSS 螢幕與可用螢幕數值只有在 Chrome 本身回報新環境時才會改變。
- 將瀏覽器移到不同顯示器、用 F11 進入全螢幕、用 Ctrl 和 + 或 Ctrl 和 − 變更 Chrome 縮放，或變更作業系統的縮放比例，然後再次查看螢幕與視埠欄位，觀察哪些數值實際產生變動。
- 在小工具上選擇 Copy report，把目前可見的欄位以純文字形式放到剪貼簿。把那段文字貼到筆記、工單或對話中，作為條件記錄，因為這個頁面刻意不會在造訪之間儲存任何歷史紀錄。
解讀報告中的每個欄位
這個小工具刻意把每個欄位分開標示，因為 Chrome 僅以原始數字回傳這些值，本身並未附帶任何脈絡。下表把每個欄位與其瀏覽器來源以及它實際回答的問題配對起來。
| 報告中的欄位 | 瀏覽器來源 | 它回答的問題 |
|---|---|---|
| Screen (CSS) | screen.width、screen.height | 目前顯示器的完整 CSS 像素座標空間 |
| Available screen | screen.availWidth、screen.availHeight | 扣掉工作列、選單列、Dock 或架子保留區域後的螢幕空間 |
| Viewport | window.innerWidth、window.innerHeight | 瀏覽器外殼內可供頁面使用的版面區域 |
| Outer window | window.outerWidth、window.outerHeight | 整個瀏覽器視窗，含標題列、分頁、面板、裝飾 |
| Device pixel ratio | window.devicePixelRatio | Chrome 用於背後緩衝區像素的倍數 |
| Estimated device pixels | round(CSS screen × devicePixelRatio) | 背後緩衝區大小的估計值，明確標示為估計值 |
| Orientation | 比較的 CSS 寬度與高度 | 僅標示 Landscape、Portrait 或 Square |
舉一個具體的 Chrome 例子來說，一個分頁回報 CSS 螢幕為 1440 × 900、devicePixelRatio 為 2，則估算的裝置像素為 round(1440 × 2) × round(900 × 2) = 2880 × 1800。小工具會把這個結果標示為估計值，而非面板的原生像素數。
有兩個 Chrome 欄位很容易搞混:available screen 和 viewport。available screen 是由作業系統設定，不含工作列或 Dock;viewport 是由瀏覽器外殼設定，不含分頁、網址列、書籤列、側邊面板或開發者工具。兩者都可能縮減版面區域，也可能同時小於完整的 CSS 螢幕。
Chrome 數值何時會改變
由於每個欄位各有其來源，每個欄位會對不同類型的變更產生反應。了解觸發條件能讓 Chrome 數值更容易解讀，尤其是在調整設定後數字看起來不對勁時。
- 調整或拖曳 Chrome 視窗會立即更新視埠與外部視窗。除非移動時跨到另一台不同回報尺寸的顯示器，否則完整 CSS 螢幕與可用螢幕不會改變。
- Chrome 的縮放指令 (Ctrl 和 +、Ctrl 和 −、Ctrl 和 0)會改變版面視埠，但通常不會動到外部視窗與 CSS 螢幕值。頁面實際上等於看到一個變大或變小的繪圖區域。
- 瀏覽器側邊面板、直立分頁、書籤列以及 Chrome 的開發者工具各自會從視埠佔去空間，並使外部視窗變大。切換它們是確認哪個欄位對外殼變更敏感的最快方法。
- Chrome OS 架子、Windows 工作列、macOS 選單列或固定面板可能會縮減可用螢幕，但不會動到 CSS 螢幕與視埠。
- 全螢幕 (桌面版用 F11，或在分頁介面中使用全螢幕按鈕)通常會把外部視窗往上推，讓視埠幾乎佔據整個螢幕。
- 把視窗移到兩台縮放或尺寸不同的顯示器之間可能會同時變更所有欄位，這是驗證多顯示器設定最快的方法。
- 遠端桌面、投放、虛擬顯示器，以及降低隱私的瀏覽器可能會回報一個固定或四捨五入的座標空間，與面板實際的原生像素不符。
一個實用的 Chrome 疑難排解習慣，是先在變更前複製一次報告，變更後再複製一次，然後讀取差異。這個小工具刻意不會在造訪之間儲存任何東西，所以唯一的紀錄就是你留下的剪貼簿快照。把條件記錄在頁面之外——縮放層級、全螢幕狀態、是哪一台顯示器、是哪個縮放比例——會讓這份差異成為有用的診斷資料，而不是一個謎團。
這個工具不會測量的事項
Chrome 透過 screen 與 window 公開的數字是座標空間的值，而不是硬體測量結果。這個小工具刻意避免假裝它能測量硬體，值得列出這些落差，以免試圖把報告與面板規格表相互對照的 Chrome 使用者過度解讀。
- 實體尺寸:沒有英吋、公分、對角線或像素點距。瀏覽器沒有校準過的尺。
- DPI 或像素密度:devicePixelRatio 是 CSS 對背後緩衝區的倍數，並非可信賴的硬體 DPI。
- 面板識別資訊:沒有顯示器廠牌、型號、序號、EDID 區塊或 GPU 輸出模式。
- 色彩與亮度:沒有色深、色域、更新率、HDR 能力、nits 或面板類型。
- 實體排列:方向標籤只是比較兩個數字，並不會讀取加速度計、轉軸、折疊狀態或多顯示器幾何資訊。
- 原生可定址像素:估算的裝置像素相乘結果可能與面板原生數量不一致，這是因為縮放、縮放比例、合成、遠端顯示或降低隱私等因素。
若要回答上述任何一個問題，正確的做法是開啟作業系統的顯示設定、查閱製造商的規格表，或使用專屬的硬體工具。Chrome 小工具的職責範圍較窄:讀取瀏覽器的座標環境、如實標示，並讓使用者自行判斷其餘版面故事是否合理。
如果你正在權衡選項，Keyboard Tester Accuracy: How to Read the Results Right 有詳細說明。
如果你正在權衡選項，How to Check Screen Resolution of a Laptop 有詳細說明。