移动端双指缩放默认失效因浏览器禁用用户缩放且img不响应多点触控；需监听touch事件手动计算两指距离差，用math.hypot求欧氏距离，结合transform: scale()与transform-origin: center实现流畅缩放，并隔离单双指操作状态。
移动端双指缩放为什么默认失效
因为现代移动端浏览器默认禁用 viewport 的用户缩放（user-scalable=no 或初始缩放锁定），且 img 元素本身不响应 touchstart/touchmove 的多点触控距离计算。直接监听 touchmove 但没做 preventDefault()，系统会优先触发页面整体缩放（或根本无反应）；做了 preventDefault() 又可能阻断滚动，得精细控制。
必须拦截并手动计算双指间距变化
核心是用两次 touchstart 记录两个触点坐标，再在 touchmove 中实时算欧氏距离差值，映射为缩放比例。关键点：
-
event.touches必须取前两个点（touches[0]和touches[1]），不能用changedTouches——后者只包含本次变动的触点，双指同时移动时可能只返回一个 - 距离公式用
Math.hypot(x2-x1, y2-y1)，比手写Math.sqrt(...)更简洁安全 - 首次双指触发时保存初始距离
initialDistance和图片当前scale，后续所有缩放基于此累乘，避免累计误差 - 缩放上限建议设为
3、下限1，超出则截断，否则图片拉伸失真或小到看不见
用 transform: scale() 而不是修改 width/height
直接改宽高会触发重排（reflow），卡顿明显；transform 走 GPU 合成，流畅得多。但要注意：
- 必须给图片加
style="transform-origin: center;"，否则缩放中心偏移，手指拖拽时“跟手性”极差 - 缩放同时要配合
translate做平移补偿，否则双指张开时图片会向左上角跑——实际需记录两指中心点位移，用transform: scale(s) translateX(x) translateY(y) - 别忘了给容器加
overflow: hidden，否则缩放后边缘溢出不可控
拖拽和缩放状态必须严格隔离
单指滑动要拖图，双指才缩放，但系统无法自动区分。常见错误是：双指抬起后还残留 isPinching 状态，导致下一次单指操作被误判为缩放拖拽。正确做法：
- 在
touchstart中判断event.touches.length === 2才设isPinching = true -
touchend里检查event.touches.length 才清标志位，不能只靠 <code>touchend触发——因为双指抬起是分先后的，第一个抬起时touches.length已变成1 - 拖拽逻辑（
panStartX/Y）只在!isPinching && touches.length === 1时初始化，否则跳过
边界处理最易被忽略：缩放后图片尺寸变大，但容器宽高固定，拖拽临界值得随 scale 动态重算，否则松手后图片会“弹回”或卡在边缘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
