dynamic-range媒体特性不能表示广色域支持，仅反映HDR硬件能力；检测广色域应使用color-gamut，其取值为srgb、p3或rec2020，但需配合color(display-p3)等宽色域语法及@supports校验才能生效。
dynamic-range 媒体特性**不能用来表示广色域支持**，它只反映设备是否具备高动态范围（HDR）能力，和色域宽度（如 P3、Rec.2020）无关。想检测广色域，请用 color-gamut。
为什么 dynamic-range 不等于广色域
dynamic-range: high 在 Safari 16.4+ 中仅表示设备有 HDR 硬件能力（比如 XDR 显示屏或 iPhone 12+），但它：
- 不触发 P3 或 Rec.2020 色彩空间渲染
- 不改变
rgb()函数的解释方式（始终按 sRGB 解析） - 无法感知系统级 HDR 开关是否开启（例如 macOS 的“高动态范围”设置）
- 与
color-gamut: p3完全正交——一台设备可以是dynamic-range: high但color-gamut: srgb（如某些 HDR OLED 笔记本仅覆盖 sRGB）
真正检测广色域该用 color-gamut
color-gamut 才是专为色域检测设计的媒体特性，取值包括 srgb、p3、rec2020。但要注意：
- 它只是“探测器”，不是“开关”：匹配
@media (color-gamut: p3)不会自动启用宽色域渲染 - 必须配合宽色域颜色函数使用，否则降级为 sRGB，例如：
color(display-p3 1 0.2 0.3) - 旧版 Safari（iOS 16.4 之前）不支持
color(display-p3)，只认已废弃的device-p3（且仅限background等少数属性） - 由于色域包含关系（P3 ⊃ sRGB），
color-gamut: srgb在 P3 屏上也会返回 true，所以规则顺序很重要：先写p3，再写srgb，避免被覆盖
实际写法示例与常见错误
正确写法（带校验与降级）：
立即学习“前端免费学习笔记（深入）”；
@supports (color: color(display-p3 0 0 0)) {
@media (color-gamut: p3) {
.hero {
background-color: color(display-p3 1 0.2 0.3);
}
}
}
常见错误：
- 只写
@media (color-gamut: p3) { background: red; }—— 没用宽色域语法，颜色仍是 sRGB - 漏掉
@supports校验 —— 在不支持color(display-p3)的浏览器中会直接忽略整条规则，导致无背景 - 把
dynamic-range: high当作 P3 检测条件 —— 在部分 iPad Pro 上可能误判（HDR 开但色域未达 P3）
最易被忽略的一点：即使设备报告 color-gamut: p3，最终渲染效果仍取决于用户是否在系统设置中启用了“广色域显示”（macOS）或“自动 HDR”（iOS），而这些开关无法通过 CSS 媒体查询探测。
