touch-action: pinch-zoom 单独使用会禁用所有滚动；正确写法是显式组合如 pan-x pan-y pinch-zoom，并配合 JS 在 touchstart 阶段准确记录双指初始距离，同时注意父级覆盖、设备差异及定位元素的合成层优化。
touch-action: pinch-zoom 单独使用会彻底禁用滚动
很多人看到“缩放”就直接写 touch-action: pinch-zoom，结果发现页面点不动、滑不了——因为这个值**不启用任何平移行为**，它只“允许”缩放，但浏览器默认不会主动启用缩放，反而会禁掉 pan-x/pan-y。实际效果等同于 touch-action: none，只是语义上更误导。
正确做法是显式声明你**允许什么 + 禁用什么**：
-
touch-action: pan-x pan-y pinch-zoom：保留横向/纵向滚动，同时允许双指缩放（注意：不是“启用”，而是“不阻止”） -
touch-action: pan-y pinch-zoom：仅允许竖向滚动 + 双指缩放，适合图文详情页中可缩放的图片容器 - 千万别把
pinch-zoom和none混用，touch-action: none pinch-zoom无效，浏览器取最严格值（即none）
表格类内容缩放时，必须配合 touchstart 阶段记录初始距离
纯 CSS 无法实现动态缩放逻辑，touch-action 只是“开闸放水”，真正的缩放计算得靠 JS。而关键陷阱在于：缩放因子（distance / startDistance）里的 startDistance 必须在 touchstart 且 e.touches.length === 2 时立刻记录。
如果等到 touchmove 才算初始距离，两指已经移动，startDistance 就不准，导致缩放抖动或跳变。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 在
touchstart中判断e.touches.length === 2，立即计算并缓存startDistance - 用
const t0 = e.touches[0], t1 = e.touches[1]取点，别用changedTouches—— 它可能只包含刚接触的那根手指 - 给目标元素设
touch-action: pan-x pan-y pinch-zoom，否则 iOS Safari 会拦截多点事件，e.touches.length始终为 1
Bootstrap 或 Vue 组件里加 touch-action 容易被父级覆盖
比如你在 .img-zoomable 上写了 touch-action: pan-x pan-y pinch-zoom，但它的父容器是 .modal-body，而后者设置了 touch-action: none，那子元素的设置就完全失效——CSS 的 touch-action 不继承，但会受祖先限制。
排查方法很简单：在 Chrome DevTools 的 Elements 面板里选中目标元素，看 Computed 标签页下的 touch-action 值是不是你写的。如果不是，往上逐级检查父元素。
常见覆盖场景：
- Bootstrap 5 的
.modal默认没设，但某些定制主题加了touch-action: none - Vue 项目中，
<router-view></router-view>外层的布局容器可能统一加了全局手势禁用 - 第三方 UI 库（如 Element Plus）的弹窗组件内部常带
touch-action: none防误触
Android Chrome 和 Safari 对 pinch-zoom 的支持差异很实际
pinch-zoom 在 iOS Safari 16+ 和 Android Chrome 63+ 都支持，但行为不一致：Safari 要求元素有明确宽高（比如 width: 100%; height: 400px），否则缩放中心偏移；Chrome 则对无尺寸元素容忍度更高。
更隐蔽的问题是：Safari 在 position: fixed 元素上应用 pinch-zoom 时，缩放后元素可能脱离视口定位，需要额外加 transform: translateZ(0) 强制合成层。
建议保底方案：
- 所有可缩放容器必须设明确
width和height（哪怕用min-height） - 对
fixed或absolute定位的缩放区域，加transform: translateZ(0) - 用
if ('onwheel' in document) { ... }这类特性检测代替 UA 判断，避免硬编码 Safari 特殊逻辑
touch-action 当作调度指令，再用 JS 精确控制状态流转。 
