移动端图片灰度适配需分层处理兼容性、事件响应与动画稳定性：必须用grayscale(0%)↔grayscale(100%)统一格式，禁用grayscale(1)及混用单位；加will-change: filter防点击失效；父容器设灰度时用.colorful{filter:grayscale(0%)}重置局部彩色。
移动端图片灰度适配不能只写 filter: grayscale(100%) 就完事——iOS 12、旧安卓 WebView（如华为 EMUI 9/小米 MIUI 10 内置浏览器）会跳过渲染或卡顿，且点击事件常失效。必须分层处理兼容性、事件响应和动画稳定性。
为什么 filter: grayscale(100%) 在真机上没反应
不是代码写错，而是滤镜根本没作用到目标上：
- 用了
background-image：CSSfilter对背景图完全无效，必须是<img src="">或内联 SVG - 父容器加了
transform: translateZ(0)或will-change: transform：旧版 Safari 会隔离合成层，绕过滤镜 - 参数写成
grayscale(1)或grayscale(100)：前者在部分 Android WebView 解析异常，后者缺%被当非法值直接回退为grayscale(0) - 样式被覆盖：更高优先级规则里有
filter: none或其他filter值，直接吞掉你的设置
grayscale() 参数必须用百分比，且要统一格式
起始和结束值单位不一致会导致动画跳变，尤其在 iOS Safari 13.4 以下版本：
- 推荐写法：
grayscale(0%)↔grayscale(100%)——语义清晰、兼容性最好 - 慎用
grayscale(1)：虽等价于100%，但 Android 7–8 不支持小数参数，会退回到 0% - 绝对不要混用：
grayscale(0)和grayscale(100%)同时存在，插值失败 - 禁用布尔写法：
grayscale(true)、grayscale(on)、grayscale()（缺参数）浏览器直接忽略整条声明
灰度后点击失效？加 will-change: filter 强制图层
这是真机高频问题：加了 filter 后，<img> 或其父容器的 :active、tap-highlight-color、甚至 JS click 事件变慢或丢失。根本原因是 WebView 对带 filter 的元素启用合成层后，改变了事件捕获路径：
立即学习“前端免费学习笔记（深入）”；
- 在默认状态（非 hover）加
will-change: filter，比transform: translateZ(0)兼容性更好 - 如果图片是可点击链接，确保用
<a><img></a>包裹完整，且没设pointer-events: none - 测试必须用真机连点，模拟器常无法复现；iOS Safari 12 及更早版本不支持
filter过渡，需用@supports (filter: grayscale())检测后降级
批量灰度时子元素例外重置要用 grayscale(0%)
给父容器设 filter: grayscale(100%) 能同时影响内部所有位图（<img>、<svg> 内的 <image>、CSS 背景图除外），但文字、边框、阴影不受影响——这点常被误认为“没生效”：
- 若容器内混有需保持彩色的图片，单独加类重置：
.colorful { filter: grayscale(0%); } - 注意：重置必须用
grayscale(0%)，不能写none（none是关键字，无法插值，过渡会跳变） - 动态切换状态时，transition 必须声明在默认样式里：
.container { transition: filter 0.3s ease; }，不能只写在:hover或 JS 切换的 class 中
真正容易被忽略的是：灰度只是视觉层效果，不影响图片原始数据——SEO、alt 文本、屏幕阅读器全都不感知这个变化。如果业务逻辑依赖“是否灰度”，得用 class 控制状态，别只靠样式判断。
