touch-action 在 Android 4.4 及更早 WebView、iOS Safari ≤ 9.1、UC 浏览器（2015 年前版本）、早期 QQ 浏览器 X5 内核等旧浏览器中完全无效，getComputedStyle(el).touchAction 返回空字符串或 auto；IE10/11 仅在指针事件上下文中部分支持。
touch-action 在哪些旧浏览器里根本无效
Android 4.4 及更早 WebView、iOS Safari ≤ 9.1、UC 浏览器（2015 年前版本）、部分国产定制 WebView（如早期 QQ 浏览器 X5 内核）对 touch-action 完全无解析能力，getComputedStyle(el).touchAction 返回空字符串或 auto，不是写错了，是压根没这个属性。IE10/11 虽支持 touch-action，但仅限于指针事件上下文，且必须配合 pointerdown 监听，单独加 CSS 不触发任何行为。
降级方案：用 viewport + user-scalable 配合 JS 模拟
当 touch-action 不可用时，核心目标只剩两个：禁双击缩放、保滚动响应。不能靠 CSS，得组合控制：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">—— 必须放在最顶部，否则 iOS 会忽略user-scalable=no - 对按钮类元素手动加
ontouchstart=""（空属性即可），触发 iOS 的“可点击身份”识别，让:active有机会生效 - 监听
touchstart并立即调用event.preventDefault()（仅针对明确不需要滚动的区域，如密码键盘），防止系统默认缩放行为被触发 - 避免全局
* { touch-action: manipulation }这种写法——旧浏览器不识别，新浏览器又可能误伤轮播图等组件
伪元素热区 + pointer-events 保点击容错
旧浏览器不支持 touch-action: manipulation 扩大容错，但 ::after 伪元素+pointer-events: none 仍完全可用，这是最稳定兼容的点击区域扩大手段：
- 给小图标按钮加
.btn-icon::after，设position: absolute; top: -12px; left: -12px; width: calc(100% + 24px); height: calc(100% + 24px); background: rgba(0,0,0,0.001); pointer-events: none; - 务必加
background: rgba(0,0,0,0.001)—— iOS Safari ≤ 9.3 会彻底忽略透明伪元素，加极低透明度背景才能激活热区 - 不要依赖
padding扩展，旧 Android WebView 对内联元素 padding 渲染不一致，容易导致点击偏移 - 该方案在 Android 2.3+、iOS 6+ 全系生效，比
touch-action兼容范围宽出整整一代
真机测试时最容易漏掉的兼容断点
模拟器永远显示正常，问题只在真实设备链路上暴露：
立即学习“前端免费学习笔记（深入）”；
- 检查服务器返回的
X-UA-Compatible响应头是否强制 IE 兼容模式（如IE=7），这会让现代 CSS 属性整体失效 - 旧版微信内置浏览器（6.5.x 及更早）使用 X5 内核，
touch-action不支持，且ontouchstart需要绑定到document而非局部容器才可靠 - Android 4.0–4.3 的 WebView 不支持
transform过渡动画，别用scale做:active反馈，改用opacity或box-shadow - 所有降级逻辑必须包裹在特性检测里：
if ('touchAction' in document.documentElement.style) { /* use touch-action */ } else { /* fallback */ }，不能靠 UA 判断
旧浏览器的兼容难点不在“怎么写”，而在“怎么验证它真起作用”——每次改完必须拿一台 Android 4.4 真机和一台 iPhone 5s（iOS 9.3）连上调试，看 computed style 和事件监听器是否按预期挂载。
