HDR 屏幕显示能力检测
在线检测显示器或手机屏幕是否支持 HDR（高动态范围）显示。直观对比 SDR 与 HDR 色彩差异，测试屏幕亮度与色彩深度。
| 格式 | 支持解码 | 流畅度 | 省电性 |
|---|---|---|---|
| SDR：H.264 / MP4（1080p@30） | - | - | - |
| HDR10：HEVC Main10 / MP4（4K@30，PQ/Rec2020） | - | - | - |
| HLG：HEVC / MP4（4K@30，HLG/Rec2020） | - | - | - |
| HDR：VP9 Profile 2 / WebM（4K@30，PQ/Rec2020） | - | - | - |
| HDR：AV1 / WebM（4K@30，PQ/Rec2020） | - | - | - |
怎么用这个页面快速判断 HDR 是否“真的生效”
HDR 显示支持测试指南
通过显示能力探测 + HDR 解码能力探测 + 可视化对比，帮助你判断设备/浏览器的 HDR 是否真的生效。
先做“能力判断”
通过浏览器的媒体查询 / CSS 支持情况，判断 HDR 输出链路是否可能开启。
做可视化高光对比
通过色块与梯度观察“高光是否更亮、暗部是否有层次”。
用 HDR 素材实播确认
加载本地 HDR 视频（手机拍摄/下载）实际播放，是最可靠的判断方式之一。
常见问题解答
围绕 HDR 输出、色域、解码与实际观感差异，整理了最常见的判断与排查路径。
这个页面能“测出屏幕最大亮度（nits）”吗？
不能。浏览器通常无法直接读取屏幕的绝对亮度上限（nits）。本页提供的是“能力探测 + 主观对比”的组合：用 dynamic-range/color-gamut/MediaCapabilities 判断支持可能性，再用高光对比与 HDR 素材实播来确认是否真的以 HDR 输出。
dynamic-range: high = 是，是否就一定是 HDR？
不一定，但这是强信号。dynamic-range: high 反映的是浏览器对“高动态范围输出能力”的判断；实际是否 HDR 还会受系统 HDR 开关、外接显示器、色彩管理、以及播放器路径影响。建议再做“高光色块对比”和“HDR 视频实播确认”。
解码探测显示支持 HDR10/HLG，但画面看起来像 SDR，这是为什么？
很常见。解码支持只说明“能解码这类码流”，不代表会以 HDR 显示输出。很多情况下浏览器/系统会把 HDR 内容做 tone mapping 转 SDR（表现为整体发灰、高光不亮）。请确保系统 HDR 打开、关闭夜览/护眼，并尽量全屏在内建屏幕上播放后再判断。
为什么同一台设备在不同浏览器上 HDR 结果不同？
不同浏览器的 HDR 管线、色彩管理、硬解策略、以及对 CSS Color 4 / MediaCapabilities 的实现程度不同。尤其是 HEVC/HDR10 在不同系统授权下差异更大。建议至少对比一次 Chrome/Edge 与 Safari/Firefox（如果有）。
CSS rec2020 > 1（HDR 值）显示“不支持”，代表什么？
这通常意味着浏览器不支持用 CSS 直接表达“超出 1 的 HDR 高光值”，或者当前输出链路不允许。即使如此，设备仍可能通过“视频播放管线”实现 HDR（比如播放 HDR 视频时生效）。所以这项更偏向“网页渲染 HDR 高光”的能力，不等价于“视频 HDR”。
我应该用什么素材来验证 HDR 效果？
推荐用你手机拍摄的 HDR 视频（iPhone/部分安卓的“HDR 视频/杜比视界”），或者你确认是 HDR10/HLG 的测试片段。把它作为本地文件加载播放，再观察高光与暗部细节，是最直观可靠的方式之一。
外接显示器/投屏会影响 HDR 判断吗？
会。外接显示器、扩展坞、投屏协议、以及系统“镜像/扩展”模式都可能导致 HDR 降级或色彩管理变化。建议先在内建屏幕上测试做基准，再测试外接链路做对照。