我的螢幕解析度

三個數字，都叫「解析度」

這個問題之所以會有互相矛盾的答案，是因為現代螢幕同時有好幾種解析度，而不同工具回報的是不同 的那一個：

網頁讀不到面板本身。它拿到的是 CSS 像素和一個裝置像素比，上面那個裝置像素數字就是兩者相 乘。這就是為什麼你買的是 2880×1800 的機器，網站卻說你的「解析度」是 1440×900，而兩邊都沒錯。

裝置像素比

這個比值是「一個 CSS 像素在每個方向上由幾個裝置像素構成」：

瀏覽器縮放會改變它。 在 2 倍螢幕上放大到 150%，像素比就變成 3，CSS 解析度也跟著縮小。 如果這一頁的數字看起來怪怪的，先檢查縮放比例，那通常就是原因。

另外，因為系統的縮放模式，這裡的「裝置像素」指的是瀏覽器實際算圖的解析度；在 macOS 或 Windows 的縮放設定下，它不一定等於面板本身的像素數。它是選圖片時該看的解析度，不是查規格用的。

該用哪一個做設計

永遠是 CSS 像素。用 CSS 像素寫出來的版面，在 1 倍和 2 倍螢幕上的實體大小相同——這正是這層抽象 存在的意義：16px 的字在兩種螢幕上都讀得到，若 CSS 量的是裝置像素，其中一種就會小到看不見。

像素比只影響一件事：點陣圖片。一張寬 400 CSS 像素的圖，在像素比 2 的螢幕上需要 800 裝置 像素的資料才會銳利，這就是 srcset 與 2x 的用途。向量與文字不需要，它們會依裝置要求的解析 度重新算圖。

螢幕、視窗、可視區域

可視區域是網頁唯一真正能在裡面排版的，也是唯一會觸發媒體查詢的。在手機上它還會隨著網址列 在捲動時隱藏與出現而改變——這就是用 100vh 寫死高度的版面在手機上會怪怪的原因。

更新率是量出來的，不是讀出來的

沒有任何 API 會告訴網頁螢幕的更新率。這裡的數字是量的：在一秒內數動畫影格數再除，然後對到最 接近的常見規格。

所以它是一個下限，不是事實：

• 頁面忙碌或機器慢會掉影格，量出來偏低。
• 背景分頁會被節流到大約 1 Hz。
• 有些瀏覽器把動畫影格上限鎖在 60，不管面板是多少。
• 可變更新率的螢幕本來就沒有單一的更新率。

如果數字看起來偏低，關掉其他東西再測一次。如果 120 Hz 的螢幕量出 60，那比較可能是瀏覽器，不 是螢幕。

色彩深度

幾乎所有瀏覽器都回報 24 位元——紅綠藍各八位元，也就是 1670 萬色。這是瀏覽器刻意凍結、用來降低 指紋辨識的數值之一，所以 10 位元的 HDR 面板通常還是回報 24。網頁看不出差別，色彩管理的應用 程式看得出來。

全部在本機讀取

每一個數字都來自你自己瀏覽器對自己的觀察，沒有任何東西被送出去。關於你這台機器，唯一真的無法 在本機回答的是它的公開位址——見 IP 位址查詢。