普通屏幕不解析color(display-p3)，因未启用p3渲染管线，浏览器直接跳过该声明而降级至fallback；需同时满足硬件、系统及浏览器三重条件才生效。
写了 color(display-p3) 却看不出和 #FF6B6B 的区别，不是你写错了，而是普通屏幕根本没走 P3 渲染路径——它连“尝试解释”这一步都没发生。
普通屏幕压根不解析 display-p3 语法
Chrome、Firefox 在 Windows/Linux 或旧版 macOS 上默认禁用 P3 输出通道；即使你写了 color(display-p3 1 0.42 0.42)，浏览器直接跳过整条声明，降级到前一条 fallback（比如 color: #FF6B6B），连色域映射环节都不触发。这不是“显示不准”，是根本没启用广色域管线。
-
@supports (color: color(display-p3 0 0 0))在 Chrome 116 及更早版本返回false，新版需显式开启硬件加速或依赖系统策略 - Android WebView（包括大部分国产浏览器）至今不支持
color()函数，遇到就静默丢弃 - Windows 上即使显示器物理支持 P3，Chrome 默认仍强制走 sRGB，除非用户手动加启动参数
--force-color-profile=display-p3
fallback 写错位置，普通屏反而更糟
很多人把基础色和 P3 色都塞进 @supports 块里，结果普通屏加载时连 fallback 都没定义，最终继承父级颜色或透明——看着像“没区别”，其实是“没颜色”。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 正确顺序必须是：先写保底
color: #FF6B6B，再用@supports覆盖，而不是包裹 -
@media (color-gamut: p3)对普通屏无效，但它会匹配部分安卓旗舰（如小米14），而这些设备实际不支持color(display-p3)，导致错误覆盖 - CSS 变量里直接写
--primary: color(display-p3 1 0.42 0.42)，旧浏览器会丢弃整个变量，后续var(--primary)返回空值
真机调试漏掉关键前提
在 MacBook 或 iPhone 上测出效果，不代表普通屏能复现——P3 渲染依赖三重锁定：设备硬件 + 系统色彩管理 + 浏览器渲染上下文，缺一不可。
- iPhone 11 及更早机型硬件不支持 P3，Safari 16.4+ 也无效
- macOS 系统设置里「显示器」→「颜色」若选了非 P3 配置文件（如 sRGB IEC61966-2.1），
window.matchMedia('(color-gamut: p3)').matches返回false，且页面强制降级 - 元素带
transform或filter时，iOS Safari 会将整个层叠上下文合成到 sRGB 缓冲区，color(display-p3)白写
真正容易被忽略的点是：display-p3 不是“增强模式开关”，它是渲染管线的底层协议切换——普通屏上它不存在，不是表现弱，是彻底缺席。想验证是否生效，别只看颜色深浅，先查 window.matchMedia('(color-gamut: p3)').matches 和 DevTools 的 Rendering 面板里是否标出 Gamut: p3。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
