color-scheme meta标签是display-p3生效的硬性前提，必须置于head最顶部且content需同时含light和dark；background-color对display-p3支持最不稳定，推荐改用linear-gradient或SVG fill实现。
color-gamut媒体查询在非广色域设备上默认不生效
它不是“失效”，而是根本不会匹配。@media (color-gamut: p3) 在 sRGB 屏幕（绝大多数 Windows 笔记本、中低端 Android 机、旧款 Mac）上直接跳过整块 CSS 规则，浏览器连解析都不做。你写的 color(display-p3) 根本不会被读到——所以别指望它“降级”，它压根没机会触发。
必须搭配显式 fallback 才能保底显示
只靠媒体查询兜不住兼容性，因为：它不提供 fallback 机制；color(display-p3) 在不支持的浏览器里会被整条声明丢弃（不是变灰，是忽略）；@supports 检测也得写对，否则照样白搭。
- 优先用
@supports (color: color(display-p3 0 0 0))包裹 P3 色值，比@media (color-gamut: p3)更可靠——它检测的是函数本身是否被识别，而非设备能力上报 - fallback 必须是独立声明，不能只靠 postcss-preset-env 自动转译：写两遍，先
background-color: #cc3344，再在同一选择器下用@supports覆盖 - 避免把所有颜色都塞进媒体查询里，重点只换品牌主色、关键按钮、图表高亮等少数几处，降低出错面
background-color 是 display-p3 支持最不稳定的属性
即使设备、浏览器、meta 全满足，background-color: color(display-p3 ...) 在 iOS Safari 和某些 Android WebView 中仍常被强制映射回 sRGB 输出空间，结果就是发灰、不饱和。
- 实测更稳的替代方案是改用
background-image: linear-gradient(color(display-p3 ...), color(display-p3 ...)) - 或者把关键色抽成 SVG 内联，用
fill属性设color(display-p3)，SVG 渲染路径对广色域更友好 - 不要在同层或祖先元素上加
opacity、filter、backdrop-filter，这些会直接关闭 P3 合成通道
color-scheme meta 标签是 display-p3 的硬性前置条件
没它，color(display-p3) 就算语法全对，也会被浏览器静默降级。这不是可选优化，是开关。
立即学习“前端免费学习笔记（深入）”；
-
<meta name="color-scheme" content="light dark">必须放在<head>最顶部，早于所有<link rel="stylesheet">和内联<style> - 只写
content="light"不够，必须包含dark（哪怕你不用深色模式），否则 Safari 会拒绝启用宽色域渲染上下文 - 它不控制颜色明暗，只告诉浏览器：“请准备 P3 渲染管线”——漏掉这步，后面全白忙
color-scheme meta 标签的位置和取值，以及 background-color 在不同平台上的合成行为差异。这两点不手动验证，光靠媒体查询和 color() 函数写得再标准也没用。 
