color-gamut媒体查询仅检测设备默认色域能力（srgb/p3/rec2020），不保证颜色准确还原，不检测屏幕校准、环境光或gpu合成路径；需配合color(display-p3)语法、显式srgb回退及@supports校验才能生效。
color-gamut 媒体查询不能保证颜色“还原准确”，它只告诉你设备默认能走哪条色域通道——sgamut、pgamut 或 rec2020，仅此而已。
color-gamut 能检测什么，不能检测什么
它不测屏幕是否校准、不反映环境光干扰、也不管 GPU 合成时有没有被强制转回 sRGB。浏览器上报的值，取决于操作系统 + 渲染引擎共同决定的“默认输出能力”。
-
sgamut：设备默认用 sRGB，绝大多数安卓中低端机、Windows 笔记本、旧 iPad 都返回这个 -
pgamut：系统声明支持 P3（如 iPhone 12+、MacBook Pro、iPad Pro），但 Chrome 117 前默认禁用 P3 输出，Safari 则更早启用 -
rec2020：极少见，目前基本只在专业监视器或测试环境出现
常见误判：@media (color-gamut: p3) 在未校准的 MacBook 上返回 true，但用户看到的 color(display-p3 0.9 0.1 0.1) 可能仍发灰；某些 Android 旗舰机返回 sgamut，不是硬件不支持，而是 WebView 没开启广色域渲染通道。
display-p3 颜色写法和 fallback 必须手动配对
用了 color(display-p3) 就得同步处理降级，postcss-preset-env 可以把 color(display-p3) 编译成 rgb()，但它不会动 @media (color-gamut: p3) 这个媒体查询本身——你得自己写 fallback 规则。
-
color(display-p3)的参数是线性值（0–1），不是 gamma 压缩后的 sRGB 值，直接拿#cc3344换算过去会偏暗、偏浊 - 别覆盖全部颜色，优先只换品牌主色、图表关键数据点、按钮高亮等对饱和度敏感的部位
- 必须写 fallback：默认用
rgb()或十六进制，再在@media (color-gamut: p3)里覆盖为color(display-p3)
示例：
@media (color-gamut: p3) {
.chart-red { color: color(display-p3 0.85 0.2 0.3); }
}
/* fallback 默认色 */
.chart-red { color: #cc3344; }
为什么 display-p3 在 Chrome 看起来比 Safari 淡
这不是 color-gamut 媒体查询的问题，是渲染管线差异。Safari 对 display-p3 支持早且激进，直接走原生 P3 合成；Chrome 直到 v117 才默认启用 P3 输出，且受系统设置或启动参数 --force-color-profile=p3 影响。
- 开发时务必在真实设备上验证，模拟器/DevTools 的色域预览不可靠
- 同一台 Mac，Safari 显示鲜艳、Chrome 显示发灰，大概率是 Chrome 没启用 P3 输出通道
- 不要指望
color-gamut查询结果和实际渲染一致——它只是“能力提示”，不是“渲染承诺”
真正影响最终颜色的，从来不是媒体查询本身，而是 display-p3 值是否被正确解析、GPU 是否按 P3 空间合成、图像是否嵌入 ICC 配置文件、Canvas 是否显式设为 colorSpace: 'display-p3'——color-gamut 只是整条链路的第一道门，而且这扇门还关不严。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
