移动端双指缩放图片默认失效，因viewport禁用用户缩放且img不响应多点触控；需设置user-scalable=yes、maximum-scale=5.0，并用touchstart/touchmove计算两指距离差值实现transform: scale()累乘缩放，配合isPinching状态区分缩放与平移，再通过边界检测约束translate偏移量。
移动端双指缩放图片为什么默认失效
因为 viewport 元标签默认禁用用户缩放，且 img 元素本身不响应 touchstart/touchmove 的多点坐标变化。不显式干预，浏览器会直接触发页面级双指缩放（整页变焦），而不是仅作用于图片。
关键前提是：必须在 <meta name="viewport"> 中允许缩放，但又不能让缩放“失控”——推荐配置为：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
-
maximum-scale=5.0是安全上限，再高容易导致图片超出视口后无法拖回 -
user-scalable=yes必须开启，否则所有 JS 手势监听都会收不到touch事件 - 不要用
touch-action: none直接封禁，它会同时屏蔽 pinch-zoom 和 pan，得不偿失
用 touchstart + touchmove 计算双指间距变化
核心不是监听“缩放”，而是持续计算两根手指的欧氏距离差值，并映射为 transform: scale()。单点触摸时忽略，仅当 event.touches.length === 2 才进入缩放逻辑。
示例关键片段（不依赖框架）：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
let scale = 1;
let lastDistance = 0;
<p>img.addEventListener('touchstart', e => {
if (e.touches.length === 2) {
const t1 = e.touches[0], t2 = e.touches[1];
lastDistance = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
}
});</p><p>img.addEventListener('touchmove', e => {
if (e.touches.length === 2) {
e.preventDefault(); // 阻止默认缩放和滚动
const t1 = e.touches[0], t2 = e.touches[1];
const currentDistance = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
const delta = currentDistance / lastDistance;
scale *= delta;
scale = Math.min(Math.max(scale, 1), 5); // 限制缩放范围
img.style.transform = <code>scale(${scale})</code>;
lastDistance = currentDistance;
}
});- 务必在
touchmove中调用e.preventDefault()，否则 iOS Safari 仍会触发页面缩放 - 用
Math.hypot()算两点距离比手动开方更简洁，兼容性够（iOS 10.3+、Android Chrome 61+） - 别直接赋值
scale，要累乘delta，否则手指移动中断再续会导致跳变
缩放后如何支持平移（pan）且不冲突
缩放后的图片常超出容器，需支持拖拽查看局部。但 touchmove 已被用于计算缩放距离，必须区分“单指拖拽”和“双指缩放”两种模式。
做法是：用一个状态变量标记当前手势类型，在 touchstart 初始化时判断指针数，后续 touchmove 分支处理：
let isPinching = false;
let offsetX = 0, offsetY = 0;
let lastX = 0, lastY = 0;
<p>img.addEventListener('touchstart', e => {
if (e.touches.length === 1) {
isPinching = false;
lastX = e.touches[0].clientX;
lastY = e.touches[0].clientY;
} else if (e.touches.length === 2) {
isPinching = true;
// ... 计算初始距离
}
});</p><p>img.addEventListener('touchmove', e => {
if (isPinching && e.touches.length === 2) {
// 缩放逻辑（同上）
} else if (!isPinching && e.touches.length === 1) {
e.preventDefault();
const dx = e.touches[0].clientX - lastX;
const dy = e.touches[0].clientY - lastY;
offsetX += dx;
offsetY += dy;
img.style.transform = <code>scale(${scale}) translate(${offsetX}px, ${offsetY}px)</code>;
lastX = e.touches[0].clientX;
lastY = e.touches[0].clientY;
}
});- 必须在
touchstart就确定isPinching，不能等到touchmove再判断，否则首帧会误判 -
translate要和scale合并在同一个transform字符串里，否则后者会覆盖前者 - 平移量
offsetX/Y需要累加，不是每次重置，否则拖拽会“弹回”原位
边界检测与缩放复位容易被忽略
用户放大后随意拖拽，很容易把图片拖到视野外，且没有明显提示。单纯靠 CSS overflow: hidden 拦截是不够的——得在 JS 层做物理边界约束。
每次更新 translate 前，计算缩放后图片实际尺寸与容器宽高的关系：
const rect = img.getBoundingClientRect(); const scaledWidth = rect.width * scale; const scaledHeight = rect.height * scale; const maxX = Math.max(0, (containerWidth - scaledWidth) / 2); const maxY = Math.max(0, (containerHeight - scaledHeight) / 2); <p>offsetX = Math.max(-maxX, Math.min(maxX, offsetX)); offsetY = Math.max(-maxY, Math.min(maxY, offsetY));
-
maxX/maxY是图片居中时左右/上下最大可偏移量，超过即“越界” - 双指松开（
touchend）时建议记录当前scale，若scale 可自动 <code>animate回scale(1)，避免残留微小缩放干扰下一次操作 - 安卓部分 WebView 对
transform的硬件加速不敏感，加will-change: transform到图片样式能减少卡顿
