@media (dynamic-range: high) 仅声明设备具备hdr硬件能力，不表示hdr正在工作；它不反映系统hdr开关状态，也不保证浏览器或内容已进入hdr渲染路径，需结合系统设置、浏览器标志、canvas色空间声明及视频元数据等多层验证。
为什么 @media (dynamic-range: high) 不等于“HDR 正在工作”
这个媒体查询只检测设备是否具备 HDR 硬件能力（比如 XDR 屏、HDR10 认证显示器），不反映系统是否启用 HDR 模式，也不保证浏览器或内容已进入 HDR 渲染路径。Windows 开启 HDR 后它可能仍返回 false；macOS Safari 17.4+ 在未开启“高动态范围”开关时也可能匹配成功——纯属设备能力声明，不是运行时状态。
window.matchMedia('(dynamic-range: high)') 的实际行为差异
不同浏览器对它的实现不一致，不能单独依赖：
- Chrome 117+ 和 Edge 109+：仅当系统 HDR 开关开启 + 显示器被识别为 HDR-capable 时才返回
true - Safari 17.4+：只要设备支持（如 MacBook Pro 16"、iPhone 12+），无论系统 HDR 是否开启，都可能返回
true - Firefox 126+：目前仍不支持该特性，
matches恒为false - 调用后务必检查
mql.matches，不要只看mql对象是否存在
必须搭配的验证步骤才能确认 HDR 可用
单靠媒体查询无法确保 HDR 输出，需组合判断：
- 先查系统级状态：
window.matchMedia('(dynamic-range: high)').matches - 再查浏览器标志是否就绪：
chrome://flags/#enable-hdr-rendering（Chrome）或edge://flags/#enable-hdr-video（Edge） - 对
<canvas></canvas>场景，必须显式请求colorSpace: 'display-p3'上下文，否则即使媒体查询匹配，渲染仍是 SDR - 对
<video></video>，需验证视频是否含mdcv元数据：ffprobe -v quiet -show_entries stream_tags=mdcv demo.mp4 - 避免在匹配块内写
background-color: #ff0000类规则——普通 HTML 元素永远走 SDR 管线，不会变亮
容易被忽略的兼容性断层
这个媒体查询在真实项目中最常失效的点，不在语法，而在链路断裂：
- Windows HDR 开关开了，但显卡驱动未更新到 WHQL HDR 支持版本 → 媒体查询可能匹配，但
<video></video>仍以 SDR 解码 - macOS 使用外接显示器（非 XDR），Safari 报告
dynamic-range: high为true，但canvas.getContext('2d', {colorSpace: 'display-p3'})静默 fallback 到 sRGB，无报错、无警告 - CSS 中写了
@media (dynamic-range: high) { .hdr-only { display: block; } }，结果在 Chrome HDR 模式下该元素仍不可见——因为浏览器对普通元素不启用 HDR 色彩空间转换 - 服务端未按 UA +
matchMedia结果区分资源，导致给 SDR 设备也下发了 P3 色域图片，反而因自动色调映射发灰
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
