color-gamut媒体查询仅检测设备色域能力，不自动提升饱和度；需配合display-p3线性色值、显式srgb回退、p3图片资源及canvas colorspace配置才能真实增强关键色表现。
color-gamut 媒体查询本身不提升饱和度，它只是告诉你“设备*可能*能显示更广的色域”，但直接写 color(display-p3) 不等于颜色就变鲜艳了——很多情况下反而发灰、偏暗、甚至回退成 sRGB 渲染。
为什么 color-gamut: p3 匹配了却没效果
常见错误现象：@media (color-gamut: p3) 在 iPhone 15 Safari 里返回 true，但 color(display-p3 1 0 0) 看起来还是带橙调的红；Chrome 117+ 默认不启用 P3 输出通道，除非系统设为“强制使用 P3”或启动时加 --force-color-profile=p3 参数。
- 它只检测操作系统和浏览器共同上报的“默认能力”，不验证 GPU 合成链路是否真正走 P3 色彩空间
- Android 大部分 WebView 和 Chrome（尤其旧版本）即使硬件支持 P3，也因系统未开启广色域渲染而返回
sgamut - Safari 对
display-p3支持更早、更激进；Chrome 直到 v117 才默认启用，且受系统级 color profile 设置影响
怎么写才真能提升关键色的饱和度
核心原则：用 color-gamut 做“窄门筛选”，只对确认支持的设备加载 display-p3 色值，并严格 fallback 到等效 sRGB 值——不能靠浏览器自动降级。
- 优先只用于品牌主色、图标高亮、数据图表中的关键点，别全站替换
-
color(display-p3)的参数是线性光值（0–1），不是 gamma 压缩后的 sRGB 值；直接把#cc3344换算过去会偏暗、偏浊，要用专业工具（如 Apple ColorSync 或在线 P3 转换器）重算 - 必须提供显式 sRGB fallback，例如：
@media (color-gamut: p3) { .brand-red { background-color: color(display-p3 0.82 0.2 0.26); /* 经过线性校准 */ } } .brand-red { background-color: #cc3344; /* 显式保底，不依赖 postcss-preset-env 降级 */ }
图像资源也要同步适配
只改 CSS 颜色没用：如果 banner 图是 sRGB 编码的 PNG，哪怕 @media (color-gamut: p3) 生效，图依然被拉伸进 P3 空间导致发灰。
- 为 P3 设备单独准备嵌入
Display P3.icc配置文件的图片，路径要独立，例如hero-p3.jpg - 媒体查询顺序必须按色域从窄到宽排列，否则
sgamut会覆盖pgamut：@media (color-gamut: srgb) { .hero { background-image: url(./hero.jpg); } } @media (color-gamut: p3) { .hero { background-image: url(./hero-p3.jpg); } } - 不要指望
<picture></picture>+srcset自动识别色域，目前无浏览器支持基于 color-gamut 的image()函数切换
最易被忽略的一点：Canvas 绘图默认走 sRGB，哪怕页面启用了 P3，ctx.fillStyle = 'color(display-p3 …)' 仍可能被降级——必须显式调用 canvas.getContext('2d', { colorSpace: 'display-p3' }) 并确保浏览器支持该选项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
