最简方案是html{filter:grayscale(100%)}，但真机易失效、卡顿或点击失灵；需用grayscale(100%)而非grayscale(1)，补-webkit前缀，加will-change:filter修复事件，逃逸元素需显式补灰。
直接在 html 元素上设 filter: grayscale(100%) 是最简方案，但真机上大概率失效、卡顿或点击失灵——这不是写法错，而是移动端 WebView 对 filter 的解析和合成行为不一致。
为什么 iOS 12 / 旧安卓 WebView 里灰度不生效
旧版内核（如 Android 4.4–7.1 的 WebView、iOS 12 及更早 Safari）对 grayscale() 参数解析异常：写成 grayscale(1) 或 grayscale(0.5) 会被静默忽略；只有 grayscale(100%) 能稳定触发。部分内核甚至把带括号但缺单位的 grayscale(100) 当作无效值丢弃。
- 必须用
grayscale(100%)，禁用grayscale(1)和grayscale(0.5) - 需补
-webkit-filter: grayscale(100%)前缀，iOS 12 仍依赖它 - IE 已淘汰，
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)不再需要
灰度后点击失效或响应延迟怎么修
加了 filter 后，<img alt="如何在移动端用CSS滤镜处理全局灰度应急模式适配？" >、按钮区域点击变慢甚至无响应，本质是某些 WebView 在启用 GPU 合成层后，改变了事件捕获路径，导致 :active、tap-highlight-color 失效。
- 给
html加will-change: filter，比transform: translateZ(0)更可靠 - 确保可点击元素没设
pointer-events: none，且包裹结构完整（比如<a><img alt="如何在移动端用CSS滤镜处理全局灰度应急模式适配？" ></a>） - 真机连点测试，模拟器无法复现该问题
响应式断点切换时漏灰或滚动卡顿
媒体查询里写 @media (max-width: 768px) { body { filter: grayscale(100%); } } 很可能无效——filter 不继承，且 body 的层叠上下文常被 html 或 fixed 元素覆盖；更麻烦的是，某些框架在小屏下动态加 transform，会触发 Chrome/Safari 静默丢弃父级 filter。
立即学习“前端免费学习笔记（深入）”；
- 始终作用于
html元素，不是body或容器类 - 逃逸元素（
iframe、canvas、video、svg image）需显式补灰：iframe, canvas, video { filter: grayscale(100%) !important; } - 动态插入的内容（如弹窗、广告浮层）要用
MutationObserver监听并补滤镜，不能只靠初始 CSS
微信小程序等非标准环境怎么办
微信小程序完全禁用 filter，H5 端虽支持但需兼容写法，uni-app 的 <image></image> 组件在小程序里是原生渲染，CSS 滤镜直接被忽略。
- 微信小程序必须换方案：Canvas 像素级处理（用
uni.createCanvasContext+ 灰度公式）或服务端预生成灰度图 - H5/APP 端仍可用
filter，但要兜底：img.gray { -webkit-filter: grayscale(100%); filter: grayscale(100%); border: 1px solid #ccc; } - 避免在
<image></image>上写内联style，uni-app 中它不走标准 DOM 渲染管线
真正难的不是加一行 filter，而是确认所有逃逸路径都被堵住——iframe 里的第三方内容、Canvas 图表、动态加载的广告、甚至系统滚动条 thumb，在灰度模式下都可能“漏色”。应急模式下，宁可多写几行补丁，也不要赌某个平台“应该支持”。
