网站可以通过浏览器 API 读到一组和显示、设备能力有关的数字:屏幕有多大、窗口有多大、一个逻辑像素对应多少物理像素,以及浏览器报告的处理器数量、内存档位和是否支持触控。

学习目标

阅读本文后,您将能够:

  • 说出屏幕、窗口和设备能力各自代表什么
  • 分清精确分辨率和浏览器故意降低的精度
  • 把这些数字当成环境描述,而不是硬件档案

屏幕和窗口

显示相关的数字描述的是当前这块屏幕和这个窗口,不是电脑型号。

页面可能读到大致是
Screen屏幕分辨率
Viewport当前窗口里能看见的区域
Device Pixel Ratio逻辑像素和物理像素的比例
Color Depth颜色深度

全屏和窗口化时,Viewport 会变,屏幕分辨率不一定变。外接显示器、缩放比例,也会让这些数字变化。

设备能力

另一组数字描述浏览器报告的计算能力和输入方式,精度往往被浏览器刻意降低了。

页面可能读到大致是
Hardware Concurrency逻辑处理器数量
Device Memory浏览器报告的大致内存档位
Touch是否支持触控

内存常常只是一个大致的档位,不是精确的安装容量。处理器数量是逻辑核心数,不是芯片型号。触控支持只说明能不能触摸,不说明是哪一块屏。

为什么还是要认识它们?

单独一个 1920×1080 几乎说明不了身份,因为太多设备一样。可是网站会把它和浏览器、时区、渲染结果放在一起看。看懂每一项的粗略程度,才不会把一组常见数字读成「已被唯一识别」。

这些数字的限度

  • 它们描述的是当前浏览器报告的显示和能力,不是完整硬件配置。
  • 相同分辨率非常常见,不能证明是同一台设备。
  • 浏览器可能降低精度,所以您看到的不一定是物理屏幕的原始值。
  • 窗口大小会随使用改变,不适合当成稳定身份。

常见问题

网站能知道我的电脑品牌和型号吗?

不能从这些数字直接得到品牌和型号。它拿到的是分辨率、像素比和若干能力档位。

笔记本合盖接了显示器,屏幕信息会变吗?

当前用来显示的那块屏变了,分辨率和像素比就可能变。

手机和电脑的触控信息一定不同吗?

不一定。支持触控的笔记本也会报告触控。报告里没有触控,只说明当前浏览器没报告触摸能力。