下面的数值由浏览器实时读取，缩放浏览器窗口会刷新可视区数据，切换系统深色模式也会同步变化。
| 参数 | 含义 | 常见值 / 怎么理解 |
|---|
想知道自己这块屏大概处在什么水平，可以对照看看。
| 设备类型 | 典型逻辑分辨率 | 典型 DPR | 说明 |
|---|---|---|---|
| 普通办公显示器 | 1920 × 1080 | 1 | 最常见，1 CSS 像素 = 1 物理像素 |
| 2K / 2.5K 显示器 | 2560 × 1440 | 1 | 同尺寸下比 1080p 更细腻 |
| 4K 显示器（100% 缩放） | 3840 × 2160 | 1 | 字会很小，多数人配合系统缩放使用 |
| MacBook Retina | 1512 × 982（14 吋） | 2 | 系统按 2 倍渲染，观感细腻 |
| iPhone（近年机型） | 393 × 852 | 3 | 3 倍渲染，DPR 高的代表 |
| 安卓旗舰 | 412 × 915 左右 | 2.5 ~ 3.5 | DPR 可能是非整数 |
| 安卓中低端 | 360 × 800 左右 | 2 | DPR 多为 2 |
注：上表为常见情况的近似值，不同机型差异很大，仅用于建立量级概念。
⚠️ 说明：页面能读到的只是操作系统「愿意告诉浏览器」的信息，并不等于屏幕硬件的全部真实规格。
例如：物理尺寸、真实 PPI、实际刷新率、亮度与色准浏览器都拿不到，本工具不做任何估算与伪造。系统缩放、多显示器、外接屏幕都会影响读数。
所有数据在你的浏览器本地读取，不上传。
买显示器要看参数，做前端要适配高分屏，远程帮同事排查「为什么他看到的和你不一样」——这些都需要先搞清楚对方那块屏到底是什么规格。
这个工具把浏览器能读到的屏幕信息一次性列出来：
① 逻辑分辨率：CSS 像素尺寸，也就是网页「认为」的宽高；
② 设备像素比 DPR：1 个 CSS 像素对应几个物理像素，2 就是 Retina 级别；
③ 物理像素：逻辑分辨率 × DPR，屏幕实际的像素数；
④ 色深：通常是 24 位（真彩色），高端屏可能到 30 位；
⑤ 色域：sRGB / P3 / Rec2020，P3 说明支持广色域，看 HDR 照片和影片更鲜艳；
⑥ HDR：是否支持高动态范围；
⑦ 触控与悬停：pointer: fine 是鼠标、coarse 是手指，做交互适配时很有用；
⑧ 深色模式偏好、减少动效偏好、屏幕方向。
两个重要提醒：
· DPR 会变：把窗口在不同的显示器之间拖动，或者调整系统缩放比例，DPR 和逻辑分辨率都会跟着变；
· 有些信息读不到：真实 PPI、屏幕物理尺寸、实际刷新率、亮度、色准，浏览器出于隐私与一致性考虑都不提供——本工具不会编造这些数字，需要的请用专业校色仪或查设备官方规格。
怎么实现：
① 基础尺寸：`screen.width/height`、`screen.availWidth/availHeight`、`window.innerWidth/innerHeight`、`window.devicePixelRatio`；
② 媒体特性：用 `window.matchMedia()` 查询 `color-gamut`（srgb / p3 / rec2020）、`dynamic-range`（standard / high）、`pointer`、`any-pointer`、`hover`、`prefers-color-scheme`、`prefers-reduced-motion`、`orientation`；
③ 色深：`screen.colorDepth`（部分浏览器还有 `pixelDepth`）；
④ 实时性：监听 `resize` 与 `matchMedia` 的 `change` 事件，窗口拖动或切换深色模式时自动重新渲染；
⑤ 复制：把所有字段拼成纯文本，用 `document.execCommand('copy')` 写入剪贴板。
它不做：不估算 PPI、不测刷新率、不测亮度与色准、不读取多显示器的各自参数（浏览器只提供当前窗口所在屏幕的信息）。
审核通过后就会展示在留言板上，稍安勿躁～
还没有留言，来抢沙发吧！