表格横向滚动与双指缩放需外层容器设 touch-action: pan-x pinch-zoom、overflow-x: auto、white-space: nowrap 及足够宽度；viewport 必须启用 user-scalable=yes 并设 maximum-scale；缩放需用欧氏距离计算，配合 transform-origin 和动态边界控制。
表格容器必须设 touch-action: pan-x pinch-zoom
直接给 <table> 或 <tbody> 加 touch-action 无效 —— 浏览器只认带 overflow-x: auto 的块级容器。真正要加样式的，是包裹表格的外层容器（比如 <div class="table-wrapper">），且该容器必须满足：overflow-x: auto、white-space: nowrap（防换行）、width: max-content 或显式宽于视口。
值选 pan-x pinch-zoom 而不是 pan-x 单独用，是因为：
-
pan-x会禁掉双指缩放，用户无法放大查看列细节 -
pinch-zoom单独用又会放开所有方向平移，导致竖向滑动时误触发页面滚动 - 组合写法明确告诉浏览器：“只允许横向拖拽 + 双指缩放”，其他手势（如竖向拖拽、双击）被自然抑制
viewport 必须配 user-scalable=yes 且设 maximum-scale
如果 <meta name="viewport"> 里写了 user-scalable=no，哪怕 CSS 层面开了 pinch-zoom，双指事件也根本不会到达 JS 层 —— 浏览器在渲染前就截断了多点触控流。
安全配置示例：
立即学习“前端免费学习笔记（深入）”；
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=4.0, user-scalable=yes">
注意两点：
-
maximum-scale=4.0是硬限制：再大的缩放会让表格内容超出视口后无法拖回，用户卡死 - 不能只写
maximum-scale=1.0却漏掉user-scalable=yes—— iOS Safari 会无视前者，仍执行双击缩放
双指缩放需用欧氏距离而非简单差值
监听 touchmove 时，仅用 touches[0].clientX - touches[1].clientX 算“距离”会出错：手指斜向移动时，x 差值变化小但实际间距变大，缩放响应迟钝甚至反向。
正确做法是实时算欧氏距离：
const t0 = e.touches[0], t1 = e.touches[1];<br>const dx = t1.clientX - t0.clientX;<br>const dy = t1.clientY - t0.clientY;<br>const distance = Math.hypot(dx, dy);
再用 distance / startDistance 得到缩放因子。关键点：
- 必须在
touchstart阶段且e.touches.length === 2时记录startDistance，不能等到touchmove才算 - 每次
touchmove更新distance后，要立刻调e.preventDefault()，否则 iOS Safari 仍会触发页面级缩放 - 缩放后需同步更新
transform-origin: center，否则放大中心偏移，体验撕裂
平移边界检测容易被忽略
缩放后表格宽度变大，横向拖拽必须限制可移动范围，否则拖到空白区就回不来。计算逻辑不是简单 maxTranslateX = tableWidth - wrapperWidth，因为：
- 缩放后
tableWidth是动态值，得用getBoundingClientRect().width实时读 - 初始
translateX可能为负（居中对齐），边界要按当前 transform 状态重算 - 安卓低端机上
requestAnimationFrame不稳定，直接在touchmove里 clamp 偏移量更可靠
最简边界控制：
const maxX = wrapperWidth - tableRect.width * scale;<br>translateX = Math.max(maxX, Math.min(0, translateX));
这里 scale 是当前缩放值，wrapperWidth 是容器 clientWidth —— 少一个变量，拖拽就会穿模或卡边。
