Chrome 將螢幕解析度回報為一組從瀏覽器的幕與視窗物件中取得的 CSS 像素值 —— 具體來說是 screen.width、screen.height、screen.availWidth、screen.availHeight、window.innerWidth、window.innerHeight、window.outerWidth、window.outerHeight,以及 window.devicePixelRatio。這些數字描述的是瀏覽器向網頁內容公開的座標空間,而非面板所標示或原生像素數,因此一般網頁永遠無法透過這個 API 介面直接讀取實體對角線、EDID 或經校正的 DPI。由於 Chrome 可能處於任意大小的視窗中、貼齊桌面的一部分、與另一台顯示器共用螢幕,或在遠端工作階段中執行,因此這些數字只是當前分頁實際所看到的快照。螢幕解析度檢查工具以聚焦頁面的形式開啟,於本機讀取每個值、以淺白語言標示每個欄位、將 CSS 幕尺寸乘以 devicePixelRatio 以估算背後的像素數,並讓您複製純文字報告。不會上傳任何顯示器識別資訊、剪貼簿內容或尺寸資料,且此工具刻意不在造訪之間儲存任何記錄。

check screen resolution in chrome
在 Chrome 中檢查幕解析度:讀取每個欄位

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 像素背後更高解析度的背後儲存區(backing store)時所使用的乘數。

這九個值中,沒有任何一個單獨代表面板的原生可定址像素數。面板所標示的解析度是硬體屬性,存在於 EDID、類似 EDID 的延伸機制以及 GPU 輸出模式之中 —— 一般網頁無法讀取這些介面。Chrome 所給的數字,就是 Chrome 此時此刻願意告訴網頁的座標環境資訊。

如何在 Chrome 中檢查幕解析度

  1. 在 Chrome 分頁中開啟幕解析度檢查工具,讓頁面能讀取自身的視窗與螢幕值,不會受到其他內容造成的版面位移干擾。
  2. 閱讀頁面上標示清楚的欄位:完整 CSS 螢幕、可用螢幕區域、當前視口、外部瀏覽器視窗、裝置像素比,以及估算的裝置像素相乘結果。請將每個值都視為來自這個瀏覽器、這個視窗、這個顯示器、這個瞬間的本機快照。
  3. 當您想要比較不同條件時,可調整 Chrome 視窗大小或將其拖曳至不同尺寸或不同顯示器。視口與外部視窗的數值會在 resize 事件時更新;CSS 螢幕與可用幕的數值,則只有在 Chrome 本身回報新環境時才會改變。
  4. 在顯示器之間移動瀏覽器、以 F11 進入全螢幕、以 Ctrl 加 + 或 Ctrl 加 − 變更 Chrome 的縮放比例,或調整作業系統的縮放設定,然後再次查看螢幕與視口欄位,了解實際發生變動的部分。
  5. 在工具上選擇「複製報告」,即可將目前可見的欄位以純文字形式放入剪貼簿。將該文字貼到筆記、工單或對話中,以便保存當時的環境記錄,因為頁面刻意不在造訪之間儲存任何記錄。

解讀報告中的每個欄位

工具刻意將每個欄位分開標示,因為 Chrome 僅以原始數字回傳這些值,並未附帶任何內建說明。下表將每個欄位與其瀏覽器來源,以及它實際回答的問題配對在一起。

報告中的欄位瀏覽器來源所回答的問題
幕(CSS)screen.width, screen.height當前顯示器的完整 CSS 像素座標空間
可用螢幕screen.availWidth, screen.availHeight扣除工作列、選單列、Dock 或底座保留區域後的螢幕空間
視口window.innerWidth, window.innerHeight瀏覽器外觀框架內部可供頁面使用的版面區域
外部視窗window.outerWidth, window.outerHeight包含標題列、分頁、面板與裝飾在內的完整瀏覽器視窗
裝置像素比window.devicePixelRatioChrome 用於背後儲存區像素的乘數
估算的裝置像素round(CSS 螢幕 × devicePixelRatio)背後儲存區大小的估算值,並明確標示為估算
方向CSS 寬度與高度的比較僅標示為橫向、直向或正方形

舉一個具體的 Chrome 範例來說,某個分頁回報 CSS 螢幕為 1440 × 900、devicePixelRatio 為 2,則估算的裝置像素為 round(1440 × 2) × round(900 × 2) = 2880 × 1800。工具會將該結果標示為估算值,而非面板的原生物件數。

有兩個 Chrome 欄位容易混淆:可用螢幕視口。可用幕由作業系統設定,不包含工作列或 Dock;視口則由瀏覽器外觀框架設定,不包含分頁、網址列、書籤列、側邊面板或開發者工具。兩者皆可能縮小版面區域,且兩者可能同時小於完整的 CSS 幕。

Chrome 數值在何時會改變

由於每個欄位各有其來源,因此各自會對不同類型的變動作出反應。了解觸發條件能讓 Chrome 讀數的解讀更加容易,特別是在調整設定後看起來不太對勁的時候。

  • 調整或拖曳 Chrome 視窗大小會立即更新視口與外部視窗。除非移動時跨越到回報尺寸不同的另一台顯示器,否則完整 CSS 幕與可用幕不會改變。
  • Chrome 的縮放指令(Ctrl 加 +、Ctrl 加 −、Ctrl 加 0)會改變版面視口,但通常不會影響外部視窗與 CSS 螢幕的值。頁面實際上看到的是更大或更小的繪圖區域。
  • 覽器側邊面板、垂直分頁、書籤列以及 Chrome 開發者工具皆會佔用視口空間並擴大外部視窗。切換這些項目是確認哪個欄位對外觀框架變化敏感的最快方式。
  • Chrome OS 底座、Windows 工作列、macOS 選單列或固定式面板可能會縮小可用螢幕,同時保持 CSS 螢幕與視口不變。
  • 全螢幕(桌面版按 F11,或分頁 UI 中的全螢幕按鈕)通常會讓外部視窗擴大,並使視口幾乎佔據整個螢幕。
  • 在兩台縮放或尺寸不同的顯示器之間移動視窗可能會同時變更所有欄位,這是驗證多顯示器設定最快的方式。
  • 遠端桌面、投放、虛擬顯示器以及隱私強化型瀏覽器可能會回報一個固定或四捨五入過的座標空間,與面板實際的原生物素數不符。

一個實用的 Chrome 排解習慣,是在變更前後各複製一次報告,再讀取其差異。由於工具刻意不在造訪之間儲存任何資料,因此唯一的紀錄就是您自行保留的剪貼簿快照。在頁面之外記錄當下的環境 —— 縮放層級、全螢幕狀態、所在顯示器、縮放比例 —— 能讓該差異成為有用的診斷依據,而非無從解讀的謎團。

本工具不量測的項目

Chrome 透過螢幕與視窗所公開的數字是座標空間值,而非硬體量測值。此工具刻意避免假裝它能做更多事,且值得將這些差距列出來,以免嘗試將報告與面板規格表進行比較的 Chrome 使用者過度解讀。

  • 實體尺寸:沒有英吋、公分、對角線或像素點距。瀏覽器並無經校正的量尺。
  • DPI 或像素密度:devicePixelRatio 是 CSS 對背後儲存區的乘數,並非可信賴的硬體 DPI。
  • 面板識別資訊:沒有顯示器廠牌、型號、序號、EDID 區塊或 GPU 輸出模式。
  • 色彩與亮度:沒有色深、色域、更新率、HDR 能力、亮度(nits)或面板類型。
  • 實體排列方式:方向標籤只是比較兩個數字,並未讀取加速度計、樞紐、折疊狀態或多顯示器幾何資訊。
  • 原生可定址像素:估算的裝置像素相乘結果可能與面板原生數量不一致,原因包括縮放、放大縮小、合成、遠端顯示或隱私縮減。

若想取得上述任何一項資訊,正確的做法是開啟作業系統的顯示設定、查閱製造商的規格表,或使用專用的硬體工具。Chrome 工具的定位較為單純:讀取瀏覽器的座標環境、如實標示,並由使用者自行判斷其餘的版面故事是否合理。