移动端双指缩放需手动实现：在touchstart记录两指初始距离和中点，touchmove中实时计算距离比值驱动scale3d()缩放，并始终调用preventDefault()；须用event.touches判断双指、禁用user-scalable=no、避免fixed定位。
移动端双指缩放必须用 touchstart + touchmove 手动计算距离变化
HTML 本身不提供“双指缩放”这个功能， 只能开关页面整体缩放权限，不能监听或控制双指手势。真要实现可交互的双指缩放（比如图片、地图、图表），必须自己捕获触摸事件、算两指间距变化、再驱动 transform: scale()。
常见错误是只监听 touchmove，漏掉 touchstart 时记录初始距离，导致第一次 move 就跳变；或者没用 event.preventDefault() 阻止浏览器默认缩放，结果手势一触发就页面闪退或白屏。
- 只在
touchstart中获取并缓存两指初始位置：startDistance = Math.hypot(dx, dy) - 在
touchmove中实时重算当前距离，用比值算缩放系数：scale = currentDistance / startDistance - 务必在
touchstart和touchmove里都调用event.preventDefault()，否则 iOS/Android 会拦截事件并触发页面缩放或滚动 - 缩放中心点不能默认用左上角——得按两指中点定位：
transform-origin: ${midX}px ${midY}px
event.touches 和 event.changedTouches 别混用
这是新手最容易写错的地方。想判断是不是双指操作，必须看 event.touches.length === 2，而不是 changedTouches —— 后者只包含本次事件中状态变化的触点（比如刚按下、刚抬起），双指同时移动时它可能只有 1 个甚至 0 个。
实操建议：
- 在
touchstart和touchmove回调开头加守卫：if (event.touches.length !== 2) return - 所有坐标计算（距离、中点）一律基于
event.touches[0]和event.touches[1] - 不要依赖
targetTouches，它和touches在多数场景下一致，但语义模糊，容易在嵌套容器里出错
iOS Safari 的 user-scalable=no 会彻底禁掉双指事件流
很多人为了“禁止用户缩放页面”，在 里写了 user-scalable=no，结果发现自己的双指缩放代码完全不触发 —— 这不是 bug，是 iOS 的硬性限制：只要关了 user-scalable，系统就不再派发任何多点触摸事件给 JS。
正确做法是保留缩放能力，但用 CSS 锁定初始缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
然后靠 JS 控制元素局部缩放，不影响全局布局。如果真要禁全局缩放又保留手势，目前无解；iOS 不开放这个权限。
缩放叠加滚动时，transform 容易失真，优先用 scale3d()
纯 scale() 在某些 Android 机型（尤其旧版 Chrome）上叠加 overflow: scroll 时，会出现渲染撕裂、缩放中心偏移、甚至 touch 坐标错乱。这是因为 2D transform 在复合层合成时精度丢失。
解决方法很简单：
- 把
transform: scale(${s})改成transform: scale3d(${s}, ${s}, 1) - 确保容器有
will-change: transform或transform-style: preserve-3d触发 GPU 加速 - 避免在缩放元素上同时设
position: fixed，它会破坏图层合并逻辑
双指缩放不是加个属性就能跑起来的功能，核心在于对触摸事件生命周期的理解和对 transform 渲染行为的妥协。很多“失效”问题，其实卡在 preventDefault 漏写、touches 误用、或者 viewport 配置自相矛盾上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
