瀏覽器所回報的螢幕解析度,是網頁內容可取得的 CSS 座標空間寬度 × 高度,而檢視區則是頁面版面配置可使用的區域。瀏覽器可能提供多個彼此相關但不同的量測值:完整螢幕尺寸、可用的螢幕區域、檢視區尺寸、外部瀏覽器視窗尺寸,以及裝置像素比。螢幕解析度檢查器會從瀏覽器讀取這些數值,為每個數值加上標示,並提供可複製的純文字報告。這能回答當下瀏覽器與顯示器配置下「我的螢幕解析度是多少?」這個實用問題,但無法保證面板實際宣稱或原生可定址的解析度。瀏覽器縮放、作業系統縮放、隱私設定行為、視窗模式、遠端工作階段,以及多螢幕配置,都可能影響瀏覽器提供的數值,因此應將回報值視為瀏覽器回報的資料,而非硬體本身的量測結果。對網頁設計師、開發人員與疑難排解工作而言,它能提供網站所接收之座標環境的具體基準。

檢查器量測的內容
每個欄位回答不同的問題。「螢幕」、「視窗」與「檢視區」經常被視為可互換的概念,但瀏覽器會分別提供這些資訊,而且每個數值都有特定用途。
| 讀數 | 瀏覽器數值 | 代表的意義 | 最佳用途 |
|---|---|---|---|
| CSS 螢幕尺寸 | screen.width × screen.height | 提供給網頁內容的完整 CSS 座標空間 | 取得瀏覽器回報的螢幕解析度 |
| 可用的螢幕區域 | screen.availWidth × screen.availHeight | 可用的螢幕區域,可能排除工作列或選單區域 | 估算可使用的桌面空間 |
| 檢視區 | window.innerWidth × window.innerHeight | 目前頁面可使用的版面配置檢視區 | 檢查頁面版面配置與響應式設計行為 |
| 外部瀏覽器視窗 | window.outerWidth × window.outerHeight | 可取得正值時的瀏覽器視窗外部尺寸 | 檢查視窗的總尺寸 |
| 裝置像素比 | devicePixelRatio | 瀏覽器將 CSS 像素縮放至裝置像素的比例 | 瞭解瀏覽器如何對應 CSS 座標 |
| 估算的裝置像素 | 四捨五入後的 CSS 螢幕尺寸乘以該比例 | 後端儲存區像素尺寸的估算值 | 檢視縮放關係 |
| 方向 | 比較 CSS 螢幕寬度與高度 | 橫向、直向或正方形 | 快速分類這兩個回報數值 |
僅採用正值且有限的瀏覽器數值。如果瀏覽器未提供正值的外視窗尺寸,檢查器會以檢視區作為該項讀數的替代值。方向標示同樣依據數值判斷:它不會讀取加速規,也不會顯示多個實體螢幕的排列方式。
透過三個步驟檢查解析度
- 開啟檢查器並比較四組尺寸。先查看 CSS 螢幕寬度與高度,再比較可用的螢幕區域、目前的檢視區,以及外部瀏覽器視窗。當有人詢問瀏覽器回報的螢幕解析度時,請使用完整的 CSS 螢幕尺寸組合;當問題涉及網頁可使用的空間時,請使用檢視區。
- 檢視裝置像素比與估算的裝置像素尺寸。查看標示清楚的比例與乘法運算,不要將估算結果視為實體量測值。此估算有助於說明 CSS 座標與可能存在的後端儲存區之間的關係,但無法證明面板原生可定址的解析度。
- 比較不同條件時,請調整或移動瀏覽器,然後選擇複製報告。調整視窗大小會重新整理檢視區與外視窗讀數,而移動視窗則可顯示瀏覽器是否會在另一個螢幕上提供不同的數值。選擇複製報告,即可將可見欄位以純文字放入剪貼簿。
在變更瀏覽器縮放、移動至其他螢幕、進入全螢幕或調整作業系統縮放之前,複製基準值相當實用。檢查器刻意不保留任何讀數紀錄,因此請保留複製的報告,並在頁面之外記下產生該報告的條件。
選擇符合問題的數值
「我的螢幕解析度是多少?」最直接的答案,就是 CSS 螢幕寬度 × CSS 螢幕高度這組數值,也就是瀏覽器提供給目前頁面的座標空間解析度。人不應自動將其重新標示為螢幕的實體或原生解析度。
- 需要一般瀏覽器回報的螢幕尺寸嗎?請使用完整的 CSS 螢幕寬度 × 高度。這些數值描述的是瀏覽器的螢幕座標空間。
- 要測試頁面可容納多少內容嗎?請使用檢視區尺寸。瀏覽器控制項、側邊面板、開發者工具,以及平台特有的裝飾,都可能使檢視區小於任一螢幕量測值。
- 要檢查扣除作業系統控制項後剩餘的空間嗎?請使用可用的螢幕區域,其中可能排除工作列或選單區域所占用的空間。
- 要量測瀏覽器視窗本身嗎?請使用外視窗數值。外部與內部尺寸之間的差異,可能包含瀏覽器介面、邊框、側邊面板、開發者工具,以及其他平台特有的功能。
區分這些資訊可避免一項常見錯誤:將最大的一組回報數值當成顯示器上所有可見內容的解析度。檢查器刻意為這些量測值加上標示,使報告、支援要求或版面配置測試所使用的數值,能對應所要回答的問題。
讀取像素比與估算的裝置像素
裝置像素比描述在目前的座標環境中,瀏覽器會將每個 CSS 像素對應至多少個裝置像素。檢查器會將 CSS 螢幕尺寸乘以該比例,並將結果四捨五入至整數像素。輸出刻意標示為「估算值」,因為這項運算描述的是瀏覽器層級的關係,而非直接檢查顯示面板。
公式:四捨五入後的 CSS 螢幕寬度 × devicePixelRatio,可得出估算的裝置像素寬度;高度也採用相同的計算方式。
例如,CSS 螢幕尺寸為 1440 × 900,且 devicePixelRatio 為 2 時,寬度估算值為 round(1440 × 2) = 2880,高度估算值為 round(900 × 2) = 1800,因此產生估算的裝置像素尺寸 2880 × 1800。
即使這項精確的計算,也可能與實體面板原生可定址的像素數不同。顯示縮放、瀏覽器縮放、作業系統縮放、合成器行為、螢幕截圖、遠端桌面、多面板,以及隱私縮減,都可能改變兩者的關係。請使用估算值來瞭解所回報的縮放情境,不要用它宣告面板的確切硬體規格。
方向是一種分類,而非硬體診斷
檢查器會比較回報的 CSS 螢幕寬度與高度。寬度較大時標示為橫向,高度較大時標示為直向,數值相等時則標示為正方形。這不會鎖定裝置方向、偵測加速規,也無法證明可摺疊、折疊、旋轉、鏡射、投影或多螢幕的實體配置方式。
變更條件後比較讀數
單一報告可回答瀏覽器目前提供的數值,而比較結果則能顯示其回報的座標環境是否會隨不同條件而改變。
- 建立基準:變更任何設定之前,先複製可見的報告。
- 調整瀏覽器大小:視窗尺寸變更後,觀察檢視區與外視窗數值如何重新整理。
- 移動視窗:如果瀏覽器會針對該位置提供不同的螢幕資訊,請在其他螢幕上重複檢查。
- 變更縮放或瀏覽器模式:比較變更瀏覽器縮放、作業系統縮放或全螢幕狀態前後的讀數。
- 儲存每個結果:再次選擇複製報告,並在複製的文字上標示所測試的條件。
數值改變表示瀏覽器的座標環境已變更,但無法指出是哪個層造成變更。瀏覽器行為、作業系統設定、視窗模式、隱私設定、遠端工作階段,以及多螢幕配置,都可能參與其中,因此複製的報告與外部筆記,會比單一未經解釋的數值更有用。
瞭解何時僅靠瀏覽器讀數並不夠
此工具無法量測一般網頁無法可靠取得的實體顯示器規格,也不會回報以下資訊:
- 實體對角線尺寸、以英吋或公分表示的尺寸、像素間距,或可信的硬體 DPI;
- 色彩深度、更新率、HDR 支援、色域、亮度或面板類型;
- 纜線功能、GPU 輸出模式或 EDID 資料。
它也無法根據瀏覽器 CSS 數值保證面板的原生解析度。若要進行購買決策、顯示器診斷或校正,請使用作業系統顯示設定、製造商規格,或專用硬體工具。若要處理瀏覽器版面配置、縮放行為與座標疑難排解,螢幕解析度檢查器可在一份加上標示的報告中提供相關的瀏覽器層級讀數。