css无法实现双指缩放，必须用javascript控制transform和touch-action；需设touch-action: none、动态计算transform-origin、限制缩放范围并实时更新锚点。
CSS 本身无法实现双指缩放手势交互——它没有触摸事件监听能力，也不提供 pinch-zoom 原语。所有所谓“CSS 实现”的说法，本质都是用 CSS 配合 JS 控制 transform、touch-action 等属性，真正驱动缩放逻辑的仍是 JavaScript。
为什么不能只靠 touch-action: pinch-zoom
这个 CSS 属性看起来很诱人，但它只在极有限场景下生效：touch-action: pinch-zoom 允许浏览器原生处理双指缩放，但仅作用于整个页面（或设置了 overflow: scroll 的可滚动容器），且无法指定缩放中心点、无法限制缩放范围、无法与平移/旋转等手势协同。更关键的是：一旦启用，你就失去了对缩放过程的控制权，JS 拿不到 touch 事件，也就没法做边界限制、双击复位、图片拖拽等任何增强交互。
- 在
<img>或普通<div> 上设 <code>touch-action: pinch-zoom基本无效（浏览器不认为它是可缩放容器） - 若设在
或全屏<div> 上，会触发页面级缩放（<code>viewport缩放），导致文字/布局错乱，不是图片局部缩放 - iOS Safari 对该属性支持不稳定，Android Chrome 表现不一致，无法作为生产方案依赖
- 给图片容器（如
<div class="preview-container">）加 <code>style="touch-action: none" - 同时确保
<meta name="viewport">中user-scalable=yes（不能为no，否则 iOS 彻底禁掉双指事件） - 不要在
<img>元素上设touch-action——它不响应，要设在包裹它的容器上 - 在
touchmove中计算两指在容器内的相对坐标：const rect = container.getBoundingClientRect(); const x0 = touches[0].clientX - rect.left; const y0 = touches[0].clientY - rect.top; - 算中点：
const originX = (x0 + x1) / 2; const originY = (y0 + y1) / 2; - 设锚点：
container.style.transformOrigin = `${originX}px ${originY}px` - 再应用缩放：
container.style.transform = `scale(${scale})` - 必须限制缩放范围：
const scale = Math.min(3.5, Math.max(1, currentDistance / startDistance)) - 给容器加
style="will-change: transform"（仅限真正需要缩放的容器，别滥用） - 缩放后记得调用
requestAnimationFrame批量更新，避免连续重绘 - 平移位移（
translate）要随缩放动态调整边界，防止图片拖出可视区后“消失不见”
touch-action: none 是必须加的前提
想用 JS 完全接管双指手势，第一步就是告诉浏览器：“别插手，我来处理”。否则系统会优先触发页面缩放或滚动，你的 touchstart/touchmove 根本收不到双指数据（尤其在 iOS 上，user-scalable=no 会直接屏蔽多点触控事件流）。
transform 缩放必须配合动态 transform-origin
直接写 element.style.transform = "scale(2)" 会让图片以左上角为锚点缩放，手指一捏，图像就“甩飞”出屏幕。正确做法是每次缩放前，把缩放中心设为两指中点坐标：
注意：别用 offsetLeft/offsetTop 算坐标——滚动、缩放、iframe 或父容器有 transform 时会严重偏移；getBoundingClientRect() 是唯一可靠方式。
性能卡顿和内存暴涨的硬约束
高清大图（比如 4K JPG）无节制放大到 scale(5)，会触发浏览器创建超大合成层，iOS Safari 很快掉帧，低端安卓机直接 OOM。这不是代码问题，是渲染管线瓶颈。
最易被忽略的一点：缩放中心点坐标必须每帧实时重算——手指移动时中点在变，锚点没跟着动，就会出现“缩放抖动”或“中心漂移”，用户感觉操作不跟手。这不是 bug，是坐标系没对齐的必然结果。
