屏幕分辨率测试
以物理像素查看显示器的原生分辨率,以及其像素比、宽高比和颜色深度。然后启动全屏 1 像素测试图案:在真正的原生分辨率下,它呈现为干净均匀的纹理,而缩放或非原生模式则显示为模糊或莫尔条纹。
原生分辨率
—
检测中…
CSS 视口
—
像素比
—
宽高比
—
颜色深度
—
测试图案
← → 切换图案
如何读取图案
锐利均匀的纹理
交替像素混合成平滑灰色 — 显示器正以原生分辨率和 100% 缩放运行。
柔和或模糊
图像正被拉伸 — 分辨率可能设为原生以下,所以 GPU 正在放大。
莫尔或条纹
涟漪图案来自插值。将浏览器缩放重置为 100% 并检查 OS 显示缩放。
屏幕分辨率是指显示器所呈现的像素数量，以宽 × 高的方式表示——例如 1920 × 1080。相同面积内像素越多，图像越清晰、越细腻。每块平板显示器都有一个固定的物理像素网格，即其原生分辨率，在该分辨率下显示效果最佳。本测试读取浏览器报告的物理像素网格，并将其显示为上方的大数字，以便您确认硬件实际运行的分辨率。
选择较低分辨率时，GPU 会将较小的图像拉伸覆盖固定网格，导致画面变得模糊。现代系统还会添加显示缩放（Retina、Windows 150%）以在保持全密度渲染的同时将界面放大显示。这就是为什么浏览器会报告两个尺寸：以逻辑像素为单位的 CSS 视口和以真实设备像素为单位的物理分辨率。两者之间的比值即为设备像素比（DPR）——DPR 为 2 意味着每个 CSS 像素由 2 × 2 个物理像素块支撑，因此浏览器看到的视口分辨率可能是屏幕分辨率的一半。
常见屏幕分辨率
| 分辨率 | 名称 | 常见场景 |
|---|---|---|
| 1280 × 720 | HD / 720p | 旧款笔记本电脑、入门级显示器 |
| 1920 × 1080 | Full HD / 1080p | 最常见的台式机和笔记本电脑分辨率 |
| 2560 × 1440 | QHD / 1440p | 更清晰的游戏和办公显示器 |
| 3440 × 1440 | UltraWide QHD | 21:9 超宽屏面板 |
| 3840 × 2160 | 4K UHD | 大尺寸高 DPI 屏幕及电视 |
| 1170 × 2532 | iPhone (DPR 3) | 现代手机——高挑的高密度面板 |
获得准确读数的技巧
- 将浏览器缩放重置为 100%——缩放会独立于操作系统对页面进行重采样。
- 在 Windows 上，在 Settings > System > Display 下选择标有“(Recommended)”的分辨率。
- 在 macOS 上，在 System Settings > Displays 下选择“Default for display”。
- 运行全屏图案测试：均匀干净的灰色表示原生输出，而模糊或摩尔纹则表示存在缩放。