@media (dynamic-range: high) 仅声明设备具备HDR硬件能力，不表示HDR正在工作；它不反映系统HDR开关状态，也不保证浏览器或内容已进入HDR渲染路径，需结合系统设置、浏览器标志、Canvas色空间声明及视频元数据等多层验证。
@media (dynamic-range: high) 不能用来判断“HDR 正在工作”，它只说明设备**有 HDR 硬件能力**，不等于当前能输出 HDR 内容。依赖它做样式切换或功能启用，大概率会失效。
为什么 @media (dynamic-range: high) 匹配了却没 HDR 效果
这个媒体查询不是运行时状态开关，而是静态能力声明：
- Windows 上即使开了系统 HDR 开关，
window.matchMedia('(dynamic-range: high)').matches仍可能返回false（显卡驱动未更新、线缆不支持、显示器未被正确识别） - Safari 17.4+ 在 MacBook Pro 或 iPhone 12+ 上几乎总返回
true，哪怕 macOS “高动态范围”开关是关闭的 - Firefox 126+ 完全不支持，
mql.matches恒为false - 匹配成功后，
div、img、background-color这些普通元素依然走 SDR 渲染管线，亮度和色域不会提升
matchMedia 返回 true 后必须验证的三件事
单靠媒体查询无法确认 HDR 输出就绪，必须链路级验证：
- 查浏览器标志：Chrome/Edge 用户需手动开启
chrome://flags/#enable-hdr-rendering或edge://flags/#enable-hdr-video - 对
<canvas>：必须显式请求colorSpace: 'display-p3'，且检查上下文是否实际创建成功（getContext('2d', {colorSpace: 'display-p3'})可能静默 fallback 到 sRGB） - 对
<video>：用ffprobe -v quiet -show_entries stream_tags=mdcv,clli验证视频是否含mdcv元数据；仅靠video-dynamic-range="hdr"不起作用，它只是提示属性，不触发 HDR 解码
容易被忽略的 CSS 行为断层
就算所有条件满足，CSS 层面仍有硬限制：
立即学习“前端免费学习笔记（深入）”；
-
@media (dynamic-range: high) { .hdr-only { display: block; } }这类规则在 Chrome HDR 模式下可能仍不生效——因为浏览器对普通 HTML 元素不启用 HDR 色彩管线 - 写
color: color(display-p3 1 0 0)或background-color: #ff0000都不会突破 sRGB 亮度上限，P3 色域扩展 ≠ HDR 动态范围提升 -
filter: brightness(1.2)会强制整个<video>退回到 SDR 渲染路径，HDR 元数据丢失 - 外接非 XDR 显示器时，Safari 可能报告
dynamic-range: high为true，但getContext('2d', {colorSpace: 'display-p3'})实际返回 sRGB 上下文，且无任何报错
真正决定 HDR 是否可用的，从来不是 CSS 媒体查询本身，而是从视频元数据、Canvas 初始化参数、系统开关、浏览器标志到显卡驱动的一整条链路。漏掉任意一环，@media (dynamic-range: high) 就只是个误导性信号。
