螢幕解析度檢查器的替代方案，是一個瀏覽器頁面，它直接從瀏覽器已經開放的 window 與 screen 物件讀取 CSS 尺寸，然後以明確的標籤顯示這些數值，並讓你複製到剪貼簿，不需要上傳任何資料。與其信任第三方服務代為轉發你的座標，這個替代方案直接從頁面本身取得正有限數值：screen.width 與 screen.height、screen.availWidth 與 screen.availHeight、window.innerWidth 與 window.innerHeight、window.outerWidth 與 window.outerHeight，以及一個由這兩個回報的 CSS 數值所衍生的方向標籤。一切都在該分頁中於本機運算；從頁面載入到重新整理之間，沒有任何資料離開瀏覽器。搜尋螢幕解析度檢查器替代方案的人，通常希望達成三件事：一份清楚標示每個欄位的簡潔讀數、一個明確標示 CSS 座標如何對應到裝置像素的估計值，以及一種方式可複製報表，以便並排比較兩次執行結果。作業系統的顯示設定面板、製造商規格表，以及 Windows 或 macOS 設定，仍是確認原生解析度或因硬體因素調整縮放的正確地點；當你想知道瀏覽器座標環境此刻實際呈現的樣貌時，線上替代方案才是合適的工具。
替代方案應呈現的內容
可靠的螢幕解析度檢查器替代方案會顯示六個不同的數值，每個都繫結到特定的瀏覽器 API。將它們混為一談，是一般檢查器產生令人困惑結果最常見的原因。許多有廣告支援的檢查器會把這些數值折成單一數字，並稱之為解析度，通常就是 screen.width 與 screen.height，或者更糟的是，把裝置像素的估計值當作原生面板解析度來呈現。一個為每個欄位標明瀏覽器來源的替代方案，讓你一眼就能判斷自己看到的是 CSS 座標空間、可見頁面區域，還是瀏覽器為你計算出來的乘積。替代方案必須呈現的欄位包括：
- CSS 螢幕寬度與高度，即向網頁內容開放的座標空間。
- 可用螢幕寬度與高度，可能會扣除作業系統介面區域，例如工作列或選單。
- 視口寬度與高度，即瀏覽器視窗內的頁面排版區域。
- 外部瀏覽器視窗寬度與高度，即包含外觀介面、邊框、側邊面板與開發者工具的完整視窗。
- 裝置像素比，即瀏覽器回報的 CSS 對裝置縮放比例。
- 估計的裝置像素尺寸，計算方式為 round(CSS 螢幕 × 比例)，並明確標示為估計值。
除了這六個數值之外，替代方案所宣稱的任何內容——包括實體英寸、點距、更新率、色彩深度、HDR 能力、面板類型與纜線頻寬——都是標準瀏覽器 API 並未提供的資訊。可信的替代方案會在頁面上說明這項限制，而不會以行銷話術填補缺口。
使用螢幕解析度檢查器檢視瀏覽器數值
螢幕解析度檢查器同樣於本機讀取這六個欄位，並為每個欄位加上標籤，使 CSS 座標空間與估計的裝置像素值保持分離。開啟頁面，比較它所呈現的數值，將報表複製到剪貼簿，然後把結果貼到一份文件中，以便同時記錄產生該結果的條件。
- 開啟頁面，並排比較 CSS 螢幕、可用螢幕、視口與外部視窗尺寸。
- 讀取 devicePixelRatio 與已標示的估計裝置像素乘積；請將該乘積視為估計值，而非面板的原生解析度。
- 在比較兩種條件時調整大小或移動瀏覽器視窗，然後選取「複製報表」，將可見的瀏覽器數值以純文字形式儲存到剪貼簿。
- 將報表貼到備忘錄中，並附上你所做的任何變更，例如瀏覽器縮放、全螢幕、將視窗移至另一個顯示器，或作業系統縮放，使條件記錄在工具之外。
這個小工具會在調整大小時重新整理視口與外部視窗數值、即時計算估計的背板尺寸，並且不儲存任何歷史紀錄。視口與外部視窗數值會在你調整大小時立刻改變，而 CSS 螢幕、可用螢幕與 devicePixelRatio 則保持不變，除非瀏覽器決定開放不同的數值。當你正在測試會在某個特定斷點切換的版面配置時，請將視窗調整大小越過該邊界，複製新的報表，並與前一張報表比較，以查看新的數值。
解讀瀏覽器回報的每個欄位
下表將每個讀數對應到替代方案實際讀取的瀏覽器屬性，以及該數值在白話中所代表的意義。
| 欄位 | 瀏覽器來源 | 實際意義 |
|---|---|---|
| CSS 螢幕 | screen.width, screen.height | 向網頁內容開放的座標空間，不一定是標示或原生解析度 |
| 可用螢幕 | screen.availWidth, screen.availHeight | 排除作業系統介面區域後的螢幕區域 |
| 視口 | window.innerWidth, window.innerHeight | 瀏覽器內部的頁面排版區域 |
| 外部視窗 | window.outerWidth, window.outerHeight | 完整的瀏覽器視窗，包含外觀介面、邊框、側邊面板與開發者工具 |
| 裝置像素比 | devicePixelRatio | CSS 對裝置的縮放比例 |
| 估計的裝置像素 | round(CSS 螢幕 × 比例) | 公開說明的背板估計值，並非原生面板像素 |
一個具體範例：CSS 螢幕 1440 × 900、devicePixelRatio 為 2 時，會產生 1440 × 2 = 2880 與 900 × 2 = 1800，得到標示為估計值的 2880 × 1800。乘法本身很單純；正是這個標籤避免了該數字被誤認為硬體讀數。這個小工具內部使用的驗證案例正是這一組：1440 × 900、比例 2，產生 2880 × 1800，並搭配檢查以確保三種方向與無效輸入皆正確處理。
外部視窗這個欄位值得特別說明。這個工具會在瀏覽器提供正值時讀取 window.outerWidth 與 window.outerHeight，並在外部數值無法取得時回退為視口。外部與內部尺寸之間的差異，一般包括瀏覽器外觀介面、邊框、側邊面板、開發者工具，以及平台特有的裝飾。如果在你的報表中外部看起來與視口相同，表示你使用的瀏覽器屬於會回傳零或拒絕開放外部數值的那一類，替代方案已改為回退處理，並未捏造數字。
方向是另一種分類，並非量測。替代方案會比較兩個 CSS 數值，並將結果標示為橫向、直向或正方形。這個分類並未使用加速度計、不鎖定裝置方向，也無法證明鉸接、折疊、旋轉、鏡像、投影或多顯示器配置在實體上如何擺放；它只是兩個回報數值的比較。
將複製的報表作為比較依據
單一快照能回答瀏覽器此刻看到什麼。替代方案的真正價值在於執行兩次比較，並將兩份報表並列貼上。兩次執行之間值得改變的條件包括：
- 瀏覽器縮放等級，放大或縮小。
- 視窗位置，從一個顯示器拖曳到另一個。
- 全螢幕，進入或離開。
- 作業系統縮放，在顯示設定中調整。
- 開發者工具或側邊面板，開啟或關閉。
在上述任一調整後，若視口或外部視窗數值發生變化，代表瀏覽器座標環境已經移動；單憑這點並無法指出是哪一層造成了變更。瀏覽器縮放會改變視口而不改變 CSS 螢幕；全螢幕會改變外部視窗而不改變 CSS 螢幕；將視窗拖曳到具有不同縮放比例的顯示器之間，可能會徹底改變 CSS 螢幕；附加於側邊的開發者工具則會縮小視口而不影響 CSS 螢幕。這正是為什麼條件應該記在你貼上報表的那份備忘錄中，而不是放在工具內部。這個小工具刻意不儲存歷史紀錄，而你複製的內容是重新整理後唯一存留下來的成果。
替代方案無法量測的項目
瀏覽器開放的範圍很窄：正有限的 CSS 座標、像素比與視窗大小。可信的替代方案不會假裝以猜測冒充讀數來擴展這個範圍。標準的 window 與 screen 物件並不包含點距、EDID 字串、色彩深度、更新率、HDR 中繼資料、亮度、面板類型、纜線能力或 GPU 輸出模式；任何宣稱能從一般瀏覽器讀取這些數值的網頁，要嘛使用了普通使用者沒有的非標準 API，要嘛就是編造數字。以下契約是一個替代方案能誠實回報的內容。
| 瀏覽器開放的內容 | 瀏覽器無法揭露的內容 |
|---|---|
| CSS 螢幕寬度與高度 | 實體對角線、英寸或公分 |
| 可用螢幕區域 | 原生面板可定址像素 |
| 視口（內部視窗） | 點距、色彩深度、更新率 |
| 外部視窗 | HDR、色域、亮度（nits） |
| devicePixelRatio | 來自硬體尺規的校正 DPI |
| 估計的背板像素（已標示） | 纜線頻寬、GPU 輸出模式、EDID 資料 |
| 由 CSS 寬度與高度得出的方向 | 鉸接或折疊硬體的真實實體方向 |
對於上述任何屬性——包括原生解析度、英寸、面板類型、更新率、HDR 能力與 EDID——正確的工具是作業系統的顯示面板、製造商規格表，或專屬的硬體公用程式。替代方案的用途，是驗證網頁內容實際接收到的座標環境，而這也是一般網頁唯一能讀取的內容。
隱私與僅限本機的運作
改用其他檢查器的實際理由之一，在於頁面載入後資料會如何處理。螢幕解析度檢查器從標準的 window 與 screen 物件讀取值、計算已標示的估計值、在調整大小時重新整理，然後停止讀取。在重新整理後，不會上傳或儲存任何顯示識別碼、報表、剪貼簿內容或尺寸；這個契約刻意設計得很窄。這個小工具驗證正有限的瀏覽器數值、計算公開說明的乘積、在視窗調整大小時更新，並區分 CSS 座標、估計的裝置像素，以及無法觀測的實體尺寸。如果避免留下指紋是你想尋找替代方案的原因之一，相關的背景閱讀是《線上使用螢幕解析度檢查器是否安全？》指南，該文正好針對這類工具探討此問題。
\