必须用@media (forced-colors: active)检测系统已强制接管渲染，因ios safari 17.4+、android chrome 120+等才支持，且需ios三开关全开或android系统级高对比启用；漏括号、位置靠前或嵌套均失效，color/background-color等必被系统语义色覆盖。
为什么@media (forced-colors: active)在移动端经常不生效
因为 iOS Safari 直到 17.4 才支持 forced-colors: active，而 Android Chrome（120+）和 Samsung Internet（24+）虽已支持，但系统级高对比度开关路径隐蔽、触发条件苛刻——比如 iOS 需同时开启「增加对比度」+「降低透明度」+「使用灰度」三者组合，缺一不可。仅开「增加对比度」只会触发 @media (prefers-contrast: high)，而非强制接管渲染。
常见错误现象：window.matchMedia('(forced-colors: active)').matches 返回 false，DevTools 模拟也无反应；页面颜色没变，但系统设置明明已开高对比。
- 真机验证必须用 iOS 17.4+ 或 Android 12+ 真实设备，模拟器和 DevTools 的 “Emulate forced colors” 只模拟
prefers-contrast，不触发强制色接管 - iOS 设置路径：设置 → 辅助功能 → 显示与文字大小 → 增加对比度 + 降低透明度 + 使用灰度（三者都要开）
- Android 路径因厂商而异：设置 → 辅助功能 → 高对比度模式（部分厂商叫“增强可见性”），需确认是否为系统级开关而非仅字体放大
如何写真正被移动端识别的 forced-colors 规则
规则必须满足三个硬条件：语法正确、位置靠后、不嵌套。任何偏差都会导致整块 CSS 被浏览器忽略。
- 只允许写成
@media (forced-colors: active)，漏括号、写true、或混用prefers-contrast都报Invalid CSS media query - 必须放在
src/styles.css文件末尾，或包裹在@layer base之后；若塞进 Tailwind 的@layer utilities或@layer components，JIT 编译器会直接跳过 - 禁止嵌套在
@supports (forced-colors: active)内——forced-colors不是 CSS 支持特性，@supports检测永远返回false
移动端 forced-colors 下哪些样式必须重写
一旦 @media (forced-colors: active) 生效，color、background-color、border-color 全部失效，且 box-shadow、background-image、opacity 直接清空。不能指望继承或默认值。
- 按钮背景统一用
background-color: ButtonFace，文字用color: ButtonText，别写text-black或bg-gray-100 - 表单控件必须显式加边框：
input, select, textarea { border: 2px solid ButtonText; }，否则在 iOS 上可能变成无轮廓的“隐形输入框” - SVG 图标要保留原意，得加
forced-color-adjust: none，且父容器需声明color-scheme: light dark（Safari 必须有这个才生效） - 禁用所有渐变：
background: linear-gradient(...)会坍缩为单色，改用纯色 +border或outline区分层级
为什么不能只靠 prefers-contrast: high 应对移动端高对比
@media (prefers-contrast: high) 是用户偏好信号，@media (forced-colors: active) 是系统已接管的事实状态。二者语义不同，行为不同，不能互相替代。
-
prefers-contrast: high在 iOS 16.4+ 和 Android Chrome 101+ 支持，但它不会强制替换你的颜色值——你写的color: #333仍生效，只是用户可能看不清 -
forced-colors: active会真实抹掉你的颜色声明，强制映射为 CanvasText/Highlight 等系统语义色，这是可访问性的底线保障 - 正确做法是分层：用
prefers-contrast: high做渐进增强（比如加粗文字、扩大点击区），用forced-colors: active做兜底（重置所有颜色为系统关键词、补全边框、禁用渐变）
最容易被忽略的是：iOS 用户开启高对比后，页面可能完全失去视觉层次——不是 bug，是你没写 @media (forced-colors: active)，或者写了但被前面的通用规则覆盖了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
