双指缩放在仪表盘中无反应，是因iOS Safari等浏览器检测到user-scalable=no后直接屏蔽多点触控事件流，导致touchstart收不到双指；须改用maximum-scale=4.0, user-scalable=yes或touch-action: pinch-zoom配合CSS/Canvas原生缩放。
为什么双指缩放在仪表盘里经常没反应
不是代码写错了，是浏览器根本没把双指事件发给你。iOS Safari 和多数安卓 WebView 一旦检测到 user-scalable=no，就会直接屏蔽所有多点触控事件流——你的 touchstart 根本收不到两个 touches。仪表盘常为“防误操作”加了这个 meta，结果反而锁死了手势能力。
必须改用：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=4.0, user-scalable=yes">。别信“只禁缩放不拦事件”的说法，这是 iOS 的硬限制，没绕过方案。
- 如果业务真不能放开页面缩放（比如金融类强一致性要求），就放弃纯 JS 双指，改用
touch-action: pinch-zoom配合 CSS 原生缩放（但仅适用于容器级，无法精确控制图表坐标系） -
touch-action: none会同时禁掉滚动和缩放，仪表盘里慎用——用户连横向滑动表格都做不了 - Chrome on Android 对
user-scalable=yes更宽容，但 iOS 必须显式设maximum-scale，否则双击仍会触发默认缩放
Canvas 图表缩放必须绕开 CSS transform
仪表盘里大量用 Canvas 渲染 ECharts、D3 或自研图表。这时千万别给 <canvas></canvas> 元素加 style="transform: scale(2)"——这只会拉伸像素，不重绘图形，锯齿、文字模糊、坐标错位全来了。
正确做法是在每次 requestAnimationFrame 绘制前，用 ctx.translate() 和 ctx.scale() 操作坐标系：
立即学习“前端免费学习笔记（深入）”；
- 先
ctx.save()保存原始状态，避免缩放污染后续绘制 - 缩放中心必须是两指中点：算出
midX、midY（用container.getBoundingClientRect()换算，别用offsetLeft） - 执行顺序固定：
ctx.translate(midX, midY)→ctx.scale(scale, scale)→ctx.translate(-midX, -midY)→ 绘图 →ctx.restore() - 缩放比例用
currentDistance / startDistance，其中距离必须用Math.hypot(dx, dy)，不用dx或dy单轴差值——斜向移动时误差极大
缩放 + 平移状态必须严格隔离
仪表盘里常见“双指缩放、单指拖拽图表”的混合操作。最容易崩的是状态残留：双指抬起后 isPinching 还是 true，下一次单指滑动就被当成缩放平移，图表瞬间飞走。
-
touchstart中只在event.touches.length === 2时设isPinching = true；单指时一律跳过 -
touchend不能只靠事件触发清状态——双指是先后抬起的，第一个抬起时touches.length已变 1，得检查event.touches.length 才重置 - 拖拽偏移量
panStartX/Y只在!isPinching && event.touches.length === 1时初始化，否则忽略 - 边界计算必须随当前
scale动态重算：缩放后画布宽高变了，最大可拖距离不再是固定值，否则松手后图表“弹回”边缘
表格与 SVG 容器的 touch-action 配置陷阱
仪表盘里嵌表格、SVG 图例、KPI 卡片时，直接套用图片缩放逻辑会失效。因为 touch-action 不继承，且 <table>、<code><svg></svg> 自身不响应该属性。
- 必须包裹一层
<div class="interactive-wrapper">，给它设 <code>touch-action: pan-x pinch-zoom，再配overflow-x: auto和white-space: nowrap - SVG 缩放若用
viewBox动态调整，需同步更新内部<g transform="scale() translate()">，否则文字、线条粗细会失真</g> - 表格列宽固定时，双指缩放可能让内容溢出容器——得监听
scale变化，动态改font-size或transform容器，而非只缩放外层 div - iOS Safari 下，含
<input>的 KPI 卡片在缩放期间要临时removeAttribute('tabindex')，否则软键盘异常弹出
缩放中心点换算、状态机清理、边界重算——这三处没处理好，80% 的“手势失效”问题就出在这儿。不是事件没监听到，是坐标系乱了、状态卡住了、临界值没更新。
