我的萤幕分辨率

三个数字，都叫「分辨率」

这个问题之所以会有互相矛盾的答案，是因为现代萤幕同时有好几种分辨率，而不同工具回报的是不同 的那一个：

网页读不到面板本身。它拿到的是 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 位址查询。