屏幕尺寸不等于窗口尺寸
三种尺寸经常被混淆,一旦搞错就会写出只在别人机器上出问题的布局。屏幕分辨率描述的是物理面板,无论你怎么缩放窗口都不会变;可用屏幕区域会减去被系统长期占用的部分,例如任务栏或 macOS 菜单栏;视口才是页面真正能绘制的区域,也是三者中唯一被 CSS 媒体查询采纳的值。
调试响应式布局时,你要的几乎总是视口尺寸。用户的显示器可能有 3840 像素宽,但他也许只开了一个 700 像素宽的窗口。如果媒体查询按屏幕宽度写,就会在放不下的空间里输出桌面版布局。
设备像素比把两者联系起来。像素比为 2 表示每个 CSS 像素由 2×2 个物理像素绘制,这正是老显示器上清晰的图片在新笔记本上发虚的原因。用视口尺寸乘以像素比,才是位图真正需要的像素数。
User Agent 会撒谎,而且是故意的
User Agent 是本页最不可信的字段。几十年来各家浏览器都在自己的标识里塞进别家的名字,只为绕过写得很糟的服务端判断,所以今天的 Chrome 仍然会同时声称自己是 Mozilla、AppleWebKit、KHTML、Gecko 和 Safari。为了抑制指纹追踪,浏览器厂商正在冻结并精简这个字符串。
请把它当作提示,而不是判断依据。要确认某个能力是否存在,就直接检测该能力:一行代码即可,能在你写代码时还不存在的浏览器上正常工作,也不会因为厂商改写 User Agent 而失效。
这些数值暴露了什么
单看任何一项都无法定位到具体的人,但组合起来的区分度高得惊人。屏幕分辨率、时区、语言列表、CPU 核心数与像素比拼在一起,往往能在数百万访客中唯一确定一个人——追踪脚本收集它们正是这个原因。
这也是部分字段被刻意模糊或直接隐藏的原因。设备内存会向下取整到很粗的档位,有些浏览器会限制核心数上报、完全不暴露内存,或者返回通用的平台字符串。Do Not Track 实际上已被放弃:几乎没有站点遵守,多数浏览器也不再发送,所以这里为空并不能说明任何问题。
对开发的现实建议是:只采集你真正需要的最少信息。如果你想决定要不要加载重量级动画,就去测量首帧的实际渲染耗时,而不是靠核心数猜测。真实测量胜过推断硬件规格,而且不会增加指纹面积。