螢幕解析度檢查工具是一種以瀏覽器為基礎的工具，它會讀取目前瀏覽器願意公開的顯示器尺寸與像素比，然後為每個數字標示其來源。螢幕解析度檢查工具會同時顯示七個不同的數值：CSS 螢幕寬度與高度、可用的螢幕區域、視窗檢視區大小、外部瀏覽器視窗大小、裝置像素比，以及由此估算出的裝置像素尺寸，再加上直向、橫向或正方形方向的標籤。所有這些數字皆來自標準的 window 與 screen 物件，這就是為什麼分頁無需安裝任何東西、無須將任何資料傳送出去，就能顯示它們。把這些數字集中在一起的目的，是為了讓差異一目了然 —— 一個 1440 × 900 的 CSS 螢幕和 1440 × 900 的視窗檢視區並不相同，兩者也都不等同於在 2 倍顯示下的 2880 × 1800 估算裝置像素。在同一處讀取這些數字，比起透過開發者工具逐一追蹤要快得多，而將它們複製出來，也方便在變更前後留下紀錄。
螢幕解析度檢查工具實際讀取了什麼
一個自稱為螢幕解析度檢查工具的網頁，可能代表截然不同的意思。有些網站只回報你正在使用的面板的一個行銷數字；有些網站則嘗試從使用者代理字串推測你的螢幕型號；還有些網站只是顯示一張常見解析度的固定對照表。本文所記錄的版本範圍較窄，也對其實際所知的內容更為誠實。它只會讀取瀏覽器在此分頁、此時此刻透過標準網頁 API 所回報的數值。並不會對面板類型、EDID 資料或硬體識別碼進行推測。也不需要安裝擴充功能、授予權限或交出任何檔案 —— 每個欄位都來自於網頁能讀取到的自身相關數值。
這代表同一台機器上的同一個工具，會因為瀏覽器、視窗模式、縮放等級與多螢幕設定的不同，而產生不同的數字。一台在 Chrome 以 100 縮放等級運作的 1366 × 768 筆電、一台開啟側邊欄的 Firefox 筆電，以及同一台透過遠端桌面連線的筆電，三者的數字不會一致，但都沒有錯。它們只是回報了不同的座標空間。若想更深入了解這些空間與瀏覽器實際願意公開內容之間的關係，可參考 關於瀏覽器實際回報內容的顯示器尺寸測試指南，該文章從不同角度探討了相同的概念。
簡而言之，螢幕上的每個數字都屬於以下三種之一：CSS 座標、估算的裝置像素倍率，或是瀏覽器無法誠實回報、無法觀察的實體數值。
逐一解讀：每個數字的意義
螢幕解析度檢查工具將數字整理成清楚的表格，讓每個欄位都能一目瞭然，而無需從脈絡中推測。下表將每個標籤與其瀏覽器來源、代表的意義，以及通常造成變動的原因配對在一起。
| 欄位 | 瀏覽器來源 | 代表的意義 | 通常變動的原因 |
|---|---|---|---|
| CSS 螢幕 | screen.width / screen.height | 向網頁內容公開的整個螢幕的座標空間 | 顯示器變更、多螢幕排列、瀏覽器隱私降低 |
| 可用螢幕 | screen.availWidth / screen.availHeight | 螢幕扣除作業系統介面（如工作列或 Dock）後的區域 | 筆電停靠、隱藏工作列、移至新顯示器 |
| 視窗檢視區 | window.innerWidth / window.innerHeight | 瀏覽器內目前可供網頁版面配置的區域 | 調整視窗大小、開啟開發者工具、新增側邊欄、縮放 |
| 外部視窗 | window.outerWidth / window.outerHeight | 包括外觀介面、邊框與側邊面板的完整瀏覽器視窗 | 調整視窗大小、變更瀏覽器介面密度 |
| 裝置像素比 | window.devicePixelRatio | 瀏覽器用於將 CSS 像素轉換為裝置像素的比例 | 作業系統縮放、縮放等級變更、瀏覽器密度 |
| 估算的裝置像素 | round(CSS 螢幕 × DPR) | 對底層緩衝像素數量的估算值，而非面板的原生解析度 | 任何會移動 CSS 螢幕或 DPR 的因素 |
| 方向 | CSS 螢幕寬度與高度的比較 | 根據兩個回報數字產生的橫向、直向或正方形標籤 | 旋轉裝置、將視窗移至形狀不同的顯示器 |
在將這些數字視為螢幕的「真實」解析度之前，有三點值得注意。首先，CSS 螢幕尺寸描述的是瀏覽器交給網頁的座標空間，不一定等同於面板標示或原生的像素數量。其次，可用螢幕可能比 CSS 螢幕小，因為排除了作業系統的介面區域。第三，視窗檢視區與外部視窗的數值描述的是瀏覽器視窗本身，而非顯示器 —— 同一台螢幕在一天之內可以容納許多不同的視窗檢視區大小。
如何使用螢幕解析度檢查工具
- 在你想要測量座標環境的瀏覽器分頁中開啟 螢幕解析度檢查工具。一旦數值可用，頁面就會填入 CSS 螢幕、可用螢幕、視窗檢視區、外部視窗、裝置像素比、估算的裝置像素以及方向標籤。
- 並排比較 CSS 螢幕、可用螢幕、視窗檢視區與外部視窗的數字。它們之間的差距是最有用的訊號：差距小通常代表近乎全螢幕且瀏覽器外觀介面極少的視窗；差距大則代表瀏覽器留出了工具列、側邊面板、開發者工具或平台裝飾的空間。
- 檢視 devicePixelRatio 與估算的裝置像素倍率。請將該倍率視為明確標示的估算值，而非面板的原生解析度。如果該倍率看起來與硬體不符，請先懷疑瀏覽器縮放、作業系統縮放、遠端連線或隱私降低，再懷疑面板本身。
- 調整視窗大小、將其拖曳至不同顯示器、開啟側邊面板、進入全螢幕或變更瀏覽器縮放等級。視窗檢視區與外部視窗的數值會在調整時更新；CSS 螢幕的數值則可能會變，也可能不會變，視視窗最終落在哪個顯示器而定。
- 選擇「複製報告」即可將可見的欄位名稱與數字以純文字形式放入剪貼簿。將報告貼到筆記、工單或聊天對話中，以便記錄測量時的條件。
- 若要進行有用的前後比較，請在變更前複製報告，進行變更，再複製一次。兩份報告之間的差異才能告訴你座標環境實際上是如何變動的。
由於這個小工具刻意不儲存任何歷史紀錄，測量的唯一紀錄就是從中複製出來的文字。這是刻意的設計：報告的內容無需離開裝置，但也不會自動保存。
CSS 像素 vs 估算的裝置像素 vs 實體尺寸
閱讀螢幕解析度檢查工具時，最常見的混淆就是把頁面上最大的數字當作螢幕的實際解析度。數字背後其實存在著三種不同的概念。
CSS 像素是網頁內容所使用的單位。它是一種角度型、與密度無關的度量，瀏覽器會依據你的觀看距離與面板密度進行縮放。1440 × 900 的 CSS 螢幕代表瀏覽器交給網頁程式碼的是一個 1440 乘 900 的 CSS 像素座標空間，無論底層的面板實際狀況為何。
裝置像素是面板上實際發光的單元。瀏覽器並不會直接公開這個數字。它公開的是裝置像素比 (DPR)，用於在內部將 CSS 像素與底層的緩衝區進行轉換。螢幕解析度檢查工具將 CSS 螢幕乘以 DPR 並四捨五入為整數，以產生估算值。以 1440 × 900 的 CSS 螢幕搭配 DPR 2 為例，估算結果為 round(1440 × 2) × round(900 × 2) = 2880 × 1800。
實體尺寸 —— 對角線的英吋數、每英吋點數、像素間距、色彩深度、重新整理頻率 —— 並不屬於上述任何一項計算。瀏覽器沒有校準過的尺規、沒有 EDID 讀取器，也沒有通往面板硬體的可信任通道。該估算值有助於理解 CSS 座標與緩衝區之間的關係，但在瀏覽器縮放、作業系統縮放、螢幕擷圖、遠端桌面、多個面板或隱私降低等因素介入時，可能會失準。當決策取決於實際的面板原生解析度時，請改用作業系統的顯示設定或製造商的規格，而非相信該倍率計算。
當數字變動時：調整大小、縮放與多螢幕
螢幕解析度檢查工具會在視窗調整大小時更新，這是用於比較條件最實用的單一行為。將視窗拖曳到第二台螢幕，CSS 螢幕的數值可能會變。將視窗最大化，視窗檢視區會上升，CSS 螢幕則保持不變。在側邊開啟開發者工具，視窗檢視區會恰好縮減該面板的寬度。將瀏覽器縮放從 100 切換到 125，DPR 會隨之變動，進而帶動估算的裝置像素尺寸。進入全螢幕時，由於大部分瀏覽器外觀介面消失，視窗檢視區通常會與 CSS 螢幕相符。
有幾個模式值得了解。將視窗移至縮放比例不同的顯示器，往往會同時改變 CSS 螢幕與 DPR。將畫面投射或遠端連線到另一台機器，往往會回報虛擬連線的座標環境，而非本地端面板的原生像素數量。注重隱私的瀏覽器設定可能會刻意降低回報尺寸的精確度，導致 4K 面板在網頁上顯示為通用的 1024 × 768。這些都不是工具的錯誤 —— 它們只是瀏覽器在當下選擇公開的內容。
要清楚看出這些層次如何互動，最佳方式是複製一份報告、變更單一變數、再複製另一份報告，然後比較兩者。螢幕解析度檢查工具不會告訴你是哪一層造成了變動，但它會顯示出座標環境確實變動了。
What the Tool Cannot Measure
The contract behind the Screen Resolution Checker is deliberately narrow, and reading the numbers honestly depends on knowing where the line is. The tool cannot report inches, centimeters, millimeters, dots per inch, pixels per inch, pixel pitch, color depth, refresh rate, HDR capability, color gamut, peak brightness, panel type, physical diagonal, cable capability, GPU output mode, or EDID data. A normal web page does not receive enough trustworthy hardware information for any of those claims.
It also cannot lock device orientation, read an accelerometer, or describe how a hinged, folded, rotated, mirrored, projected, or multi-monitor setup is physically arranged. The portrait, landscape, or square label is only a classification of the two current reported numbers, not a statement about how the device is being held or where it sits in a room. For any decision that depends on those physical properties — buying a new monitor, calibrating color, diagnosing a flickering panel, matching a screen to a projector — use the operating-system display settings, the manufacturer's specification sheet, or a dedicated hardware tool. The browser has just enough information to be useful for layout and design decisions, and not enough to substitute for hardware reporting.
Privacy and Local Processing
Every value the Screen Resolution Checker shows comes from standard window and screen objects in this browser, in this tab, at this moment. The page does not upload a display identifier, a report, clipboard content, or any dimension off the device. It does not store a history between reloads. The Copy report action places visible fields in plain text on the clipboard, exactly as they appear on screen.
The narrow contract is worth restating because it shapes what the tool can be trusted to do. It validates that reported values are positive and finite. It calculates an openly described multiplication of CSS screen by device pixel ratio. It refreshes on resize. It distinguishes CSS coordinates from estimated device pixels and from unobservable physical size. That scope is what lets the page be private by construction: there is nothing to upload, because there is nothing the page needs from anywhere except this browser. If a screen resolution checker ever asks for a file, a login, or a hardware permission to show those numbers, that is a sign it is doing something different from the contract described here.