屏幕测试

按顺序显示一组标准图样,逐项检查坏点、灰阶、均匀度和锐度。点「全屏查看」再用方向键翻页,检查效果最好。

开始之前请先确认这几件事

下面几条不满足的话,测出来的结论是无效的,所以放在最前面说。

  • 先关掉系统的色彩调节。macOS 的「夜览」和「原彩显示」、Windows 的「夜间模式」、以及显卡驱动里的色温调节,都会直接改变屏幕输出的颜色。开着它们测出来偏黄偏红,那是软件调色,不是显示器的问题。测色之前请全部关掉,测完再开回来。
  • 开着 HDR 时颜色测试不准。系统启用 HDR 后,普通 sRGB 内容会经过一次色调映射,纯色和灰阶都不再是原值。做坏点和灰阶测试前先把 HDR 关掉,能省掉一大堆误判。
  • 不进全屏就测不到边缘。普通窗口下,地址栏、书签栏和系统任务栏会占掉屏幕边缘,那几条边上的像素就看不到。所以坏点和漏光测试请点进全屏再看。iOS Safari 对非视频元素的全屏限制较多,这时页面会退化成铺满整屏的遮罩,顶部可能还留着地址栏。
  • 环境光会骗过你的眼睛。白天的环境光会让黑场看起来发灰,也会盖过轻微的漏光。暗部细节和漏光这两项请在关灯或者拉上窗帘的环境下做,屏幕亮度也不要调到最高。
  • 这个工具不放数据,也不当仪器。它只能把图样准确地显示出来,然后靠你的眼睛判断。亮度、色准、响应时间、输入延迟这些都需要色度计或者高速摄像机才能测,网页做不到,所以这里也不假装能给数值。

为什么这样设计,以及哪些事它做不到

细图样必须按设备像素画,这不是讲究而是前提。CSS 像素和设备像素是两回事:在 2 倍屏上,用 CSS 像素画一条「1 像素」的线,实际会占 2 个物理像素,测出来的就不是面板的真实解析力了。所以这里的棋盘格和细线都直接生成 ImageData 缓冲区,用 putImageData 提交——这个接口不参与任何缩放,缓冲区里的一个像素严格对应屏幕上的一个物理像素。画布的 width 和 height 按 devicePixelRatio 放大,CSS 尺寸保持不变,浏览器负责把两者对应起来。

系统层面的色彩调节会让颜色测试整体失效。macOS 的夜览和原彩显示、Windows 的夜间模式、显卡驱动里的色温滑块,都会直接改变屏幕上输出的颜色;系统启用 HDR 之后,普通 sRGB 内容还会经过一次色调映射,纯色和灰阶都不再是原值。这时候测出偏黄、偏红或者灰阶挤在一起,很可能是软件调色而不是显示器的问题。所以做颜色相关测试前,请把这些都关掉,测完再开回来。

这个工具只负责「准确地显示」,判断还得靠眼睛。屏幕测试本质上是一组标准图样加上人的观察。它能保证给到屏幕的信号是纯正的——纯色不带任何叠加、灰阶硬切换不做插值、棋盘格落在真实像素上——但没有任何一个网页能替代仪器。亮度、对比度、色准、响应时间、输入延迟这些指标需要色度计、光谱仪或者高速摄像机才能测,浏览器拿不到,所以这里也不假装能给出数值。它真正的价值是在没有仪器的场合快速排除明显问题。

暗部和漏光一定要在关灯的环境下看。白天的环境光会让黑场看起来发灰,也会把轻微的背光漏光盖过去。而且看的时候不要盯着屏幕看几秒就下结论——眼睛适应暗环境需要时间,先在全黑那一屏上待二十秒,再慢慢扫视四角,这样 IPS 面板那种边缘轻微泛白和真正成块的光晕才分得清。正常面板四角略有泛白是常态,成片的光斑才算问题。

锐度测试的结果还取决于分辨率和系统缩放。1 像素棋盘格在正常距离下应该看起来是一片均匀的灰——因为每个像素只有黑或白,人眼在正常观看距离已经融合了。如果看到明显的网格、波纹或者直接糊成一片纯色,说明画面经过了二次缩放:可能是分辨率没设成面板原生值,也可能是系统缩放设成了 125% 或者 150% 这类非整数倍。这时候该调的是显示设置,不是显示器。