顯示器尺寸測試是一項瀏覽器端的檢查，會在單一份標示清楚的報告中回報 CSS 螢幕寬度與高度、可用的螢幕區域、視窗內部區域、外部視窗，以及瀏覽器的裝置像素比，而且它永遠不會測量實際的英吋數。這份報告是由瀏覽器已公開的標準數值所組成：screen.width 與 screen.height 描述提供給網頁內容的座標空間，而 screen.availWidth 與 screen.availHeight 可能會排除作業系統佔用的區域，例如工作列或選單列。window.innerWidth 與 window.innerHeight 提供排版視窗內部區域，而 window.outerWidth 與 window.outerHeight 則會在瀏覽器提供時回報外部瀏覽器視窗。devicePixelRatio 是瀏覽器在 CSS 座標與背端緩衝區之間所使用的倍率。綜合這些欄位，你就能比較網頁此刻所看到的座標環境，與稍早之前、調整大小後、縮放變更後，或移至另一台顯示器後的座標環境之間的差異。這項測試是本機執行：不會上傳任何數值、不會保留任何歷史記錄，而「複製報告」按鈕會將可見欄位以純文字形式放入剪貼簿。
顯示器尺寸測試實際測量的是什麼
大多數搜尋「顯示器尺寸測試」的使用者其實想知道兩個相關但不同的問題：面板的英吋尺寸有多大，以及網頁可用的座標空間有多大。瀏覽器頁面無法回答第一個問題，因為一般的 JavaScript 無法存取校正過的尺規、EDID 資料，或可信賴的硬體 DPI。它能做的是準確地回答第二個問題，每次瀏覽器讀取其 window 或 screen 物件時，都會附上明確的標籤。螢幕解析度檢查工具就屬於第二類。它會從 screen、window 與 devicePixelRatio 物件讀取正有限值，清楚地標示它們，並讓你以純文字記錄的方式複製這些值。任何超出這些值的內容——實體對角線、點距、亮度、面板類型、更新率、HDR、色域、纜線能力——都超出一般網頁所能提供的範圍，必須透過作業系統的顯示設定、製造商規格，或專用硬體工具才能取得。
顯示器尺寸測試所比較的欄位
單一份報告通常會並排列出四組寬×高的測量值，再加上兩個衍生值與一個方向標籤。每一個欄位來自不同的瀏覽器物件，因此會因不同的原因而改變。下表列出這個小工具所公開的每個欄位、其來源，以及它實際代表的意義。
| 欄位 | 來源 | 代表的意義 |
|---|---|---|
| CSS 螢幕 (W × H) | screen.width、screen.height | 公開給網頁內容的座標空間；不一定等於面板的標示解析度。 |
| 可用螢幕 | screen.availWidth、screen.availHeight | CSS 螢幕減去作業系統介面元素（例如工作列）所佔用的區域。 |
| 視窗內部區域 | window.innerWidth、window.innerHeight | 頁面目前可用的排版視窗內部區域；使用者調整視窗大小時會改變。 |
| 外部視窗 | window.outerWidth、window.outerHeight | 包含外框的完整瀏覽器視窗；若無法取得則回退為視窗內部區域。 |
| devicePixelRatio | window.devicePixelRatio | 瀏覽器在 CSS 座標與背端緩衝區之間所使用的倍率。 |
| 預估裝置像素 | 每個軸向的 round(CSS 螢幕 × ratio) | 明確標示為預估值的數字；並非原生面板解析度的保證。 |
| 方向 | 比較 CSS 寬度與高度 | 橫向、直向或正方形；這是一個標籤，而不是加速度計的讀數。 |
當 CSS 螢幕欄位比可用螢幕欄位更寬時，兩者的差異就是作業系統在邊緣所保留的區域。當外部視窗欄位大於視窗內部區域欄位時，差異大致就是瀏覽器外框——標題列、分頁、側邊面板、開發者工具，以及任何平台特定的裝飾。當視窗內部區域小於 CSS 螢幕時，只是代表瀏覽器視窗並未最大化，或是頁面以非預設的縮放比例顯示。
如何執行顯示器尺寸測試
在你想要檢查的瀏覽器與分頁中開啟螢幕解析度檢查工具頁面。該頁面會立即從目前的瀏覽器狀態填入報告，因此你應該做的第一件事，是閱讀全部四個尺寸列與倍率列，並記下你觀察到的條件：視窗位於哪一台螢幕、視窗是否最大化、設定的縮放等級為何，以及開發者工具是否已停駐。這些條件本身就是測試的一部分，而不是測試的中繼資料。
- 開啟頁面並比較 CSS 螢幕、可用螢幕、視窗內部區域與外部視窗這幾列。記下任何為零、缺失或為負的欄位；該小工具會拒絕這些輸入。
- 檢視 devicePixelRatio 與標示清楚的預估裝置像素乘積。請將這個乘積視為預估值，而非面板的原生解析度。
- 在比較不同條件時，調整瀏覽器視窗大小或移動視窗。視窗內部區域與外部視窗這幾列會在調整大小時更新；CSS 螢幕這幾列只有在瀏覽器視窗跨越到不同的座標空間時才會改變。
- 一次只改變一個條件——縮放等級、全螢幕、螢幕、作業系統縮放——並在每次變更之間按下「複製報告」，以便能比對可見欄位的差異。
- 逐欄位比較兩份報告。視窗內部區域列改變但 CSS 螢幕列未變，表示視窗被調整大小；CSS 螢幕列改變，則表示視窗移到了不同的顯示器，或瀏覽器重新回報了其座標空間。
解讀 devicePixelRatio 與預估像素
這個小工具會將 CSS 螢幕寬度乘以 devicePixelRatio，對每個軸向四捨五入為整數，然後將結果顯示為預估裝置像素。算式本身很單純；容易出錯的地方在於解讀方式。如果 CSS 螢幕為 1440 × 900 CSS 像素，而瀏覽器回報的 devicePixelRatio 為 2，則預估值為 round(1440 × 2) × round(900 × 2)，也就是 2880 × 1800 個預估裝置像素。這個乘法運算是該小工具執行的其中一個標示清楚的步驟；另一個則是方向分類，也就是比較回報的 CSS 寬度與高度。2880 × 1800 這個數字代表瀏覽器的座標系統在相同實體範圍的背端緩衝區下所推測的結果，但顯示縮放、瀏覽器縮放、作業系統縮放、合成器行為、螢幕截圖、遠端桌面、多面板設定，以及隱私降低機制，都可能使實際原生面板與這個數字有所出入。請將這個預估值視為對倍率的健全性檢查，而非每英吋像素數的測量結果。
會改變回報數值的條件
顯示器尺寸測試大部分的故障排除價值，來自於一次只改變一件事並觀察哪一列產生變動。下表將常見的變更與會產生反應的列，以及當反應看起來不正確時最可能的原因配對在一起。
| 條件變更 | 通常會變動的列 | 為何可能讓讀者感到困惑 |
|---|---|---|
| 拖曳視窗邊緣以調整大小 | 視窗內部區域、外部視窗 | CSS 螢幕欄位保持不變；只有視窗內部區域與外部視窗會對調整大小產生反應，因為可用螢幕是由作業系統回報，與瀏覽器視窗無關。 |
| 瀏覽器縮放放大或縮小 | 視窗內部區域，CSS 螢幕可能不變 | 縮放會改變排版視窗內部區域，但並非所有瀏覽器都會同時改變底層的 CSS 座標空間。 |
| 進入全螢幕 | 外部視窗趨近視窗內部區域 | 外框消失，因此外部視窗會變得接近視窗內部區域。 |
| 將視窗移至另一台顯示器 | CSS 螢幕、可用螢幕 | 不同的顯示器會公開不同的座標空間，即使其像素數相同時也是如此。 |
| 變更作業系統縮放 (Windows 顯示設定、macOS 解析度) | CSS 螢幕、devicePixelRatio | 作業系統縮放可能同時縮減回報的 CSS 座標空間並降低倍率。 |
| 開啟或關閉開發者工具停駐面板 | 視窗內部區域 | 停駐面板會佔用排版視窗內部區域的空間；外部視窗可能增加或維持不變。 |
| 遠端桌面或虛擬化工作階段 | CSS 螢幕、devicePixelRatio | 回報的數值屬於虛擬顯示器，而非主機端的面板。 |
| 瀏覽器隱私降低模式 | CSS 螢幕 | 部分瀏覽器會降低精確度或回報經四捨五入的值，以限制指紋辨識。 |
這個條件清單正是該小工具不保留歷史記錄的原因。在單一變更前後複製的兩份連續報告，就是完整的除錯產物；產生它們的條件應記在你的筆記中，而不是記在頁面裡。如需適用於各種瀏覽器、而非單一特定分頁的指南，請參閱如何在任何瀏覽器中檢查螢幕解析度，該文在更廣泛的脈絡下逐步說明相同的逐欄位比較方式。
這項測試無法告訴你關於顯示器的哪些資訊
即使每一列都已填滿，且乘積運算結果看起來相當合理，這個小工具仍然無法回答讀者經常期待它能回答的一長串問題。它無法測量英吋或公分、每英吋點數、像素點距、色彩深度、更新率、HDR 能力、色域、亮度、面板類型、實體對角線、纜線頻寬、GPU 輸出模式，或 EDID 資料。這些數字都不會透過 screen、window 或 devicePixelRatio 物件傳遞，而一般的網頁並沒有權限讀取它們。如果你因為採購、診斷或校正顯示器而需要取得這些數值，請使用作業系統的顯示設定、製造商的規格表，或專用的硬體工具。顯示器尺寸測試所描述的是這個瀏覽器目前告訴你的程式碼的內容，而不是面板背後硬體的描述。
在你關注的機器與分頁上執行這項測試，在每次條件變更前後複製報告，並將你關於縮放、螢幕擺放位置與全螢幕狀態的筆記保留在這個小工具之外——這個頁面刻意不儲存任何歷史記錄，也不會上傳任何資料。當報告出現非預期的變更時，兩份副本之間的差異會告訴你是哪一列被瀏覽器移動、哪一列維持不變，這通常足以辨識是哪一層級產生了變動。
如果你正在權衡選項，線上繪圖板 vs Amazon：哪一個真的有用？對此有詳細說明。