移动端P3色域不生效是因渲染链路默认锁定sRGB，需HTML meta与CSS双层声明协同：meta必须置于head最前，CSS须先声明color-gamut:p3再使用color(display-p3)，且display-p3参数须经专业工具转换，不可直接换算十六进制。
移动端P3色域不生效的典型表现
iOS设备上颜色发灰、偏淡，明明用了#FF6B6B却看起来像粉笔灰；设计师给的sRGB色值在iPhone 12+上明显“褪色”；Chrome DevTools里看到color-gamut: p3返回unknown。这不是CSS写错了，是渲染链路默认卡在sRGB——系统没被明确告知“这张页面要走广色域”。
关键不是加不加color-scheme，而是得让整个渲染上下文从根开始支持P3。iOS Safari直到16.4才真正开放P3 CSS支持，且仅限于display: p3标记的canvas或img标签，纯CSS颜色仍需绕道。
HTML meta和CSS双层声明必须同时存在
只加<meta name="color-scheme" content="light dark">没用；只写color: color(display-p3 1 0.42 0.42);也没用。两者缺一不可，且顺序不能错：
-
<meta>必须放在最前面，早于所有CSS link和style标签 - CSS中使用
color(display-p3 ...)前，必须确保父元素已声明color-gamut: p3（哪怕只是html { color-gamut: p3; }） - 不能依赖
@media (color-gamut: p3)做条件加载——它在Safari里常返回false，即使设备支持
立即学习“前端免费学习笔记（深入）”；
display-p3函数的参数陷阱和fallback写法
color(display-p3 ...)接收的是0–1范围的线性值，不是十六进制或sRGB百分比。把#FF6B6B直接转成color(display-p3 1 0.42 0.42)是错的——那是sRGB值，未经色域映射。
正确做法是用工具（如ColorSync Utility或在线P3转换器）把设计稿里的sRGB值转为display-p3坐标，再手动填入。更稳妥的是双声明：
button {
color: #FF6B6B; /* fallback for non-P3 browsers */
color: color(display-p3 0.98 0.35 0.35); /* actual P3 value */
}注意：Safari对color(display-p3)的支持仅限于color、background-color、border-color等基础属性，box-shadow或gradient里暂不支持。
Canvas绘图时P3颜色被强制降级的原因
用ctx.fillStyle = 'color(display-p3 1 0 0)'画出来还是sRGB红，是因为<canvas></canvas>默认在sRGB色彩空间下渲染，即便设备支持P3。
必须显式创建P3上下文：
const canvas = document.getElementById('my-canvas');
const ctx = canvas.getContext('2d', {
colorSpace: 'display-p3'
});但要注意：colorSpace: 'display-p3'在iOS Safari中仅支持2d上下文，webgl和webgl2目前仍锁定sRGB；另外，Canvas尺寸缩放（如viewport缩放）可能触发浏览器回退到sRGB渲染路径，此时需监听window.devicePixelRatio变化并重绘。
P3不是开关，是整条渲染链路的协同——从meta声明、CSS color-space选择、Canvas上下文初始化，到设计师交付的原始色值是否经过P3校准。漏掉任意一环，用户看到的就只是“差不多的颜色”。
