touch-action合法取值包括auto、none、pan-x、pan-y、pinch-zoom、manipulation及它们的空格组合（如pan-x pinch-zoom）；其中auto由浏览器决定行为，none禁用所有默认手势，pan-x/pan-y分别仅允许水平/垂直滚动，pinch-zoom启用双指缩放，manipulation等价于pan-x pan-y pinch-zoom且消除300ms点击延迟。
touch-action 的合法取值有哪些
touch-action 是 CSS 中控制触摸设备上默认手势（如双指缩放、滑动、长按）是否被浏览器接管的属性。它的取值不是任意字符串，只有标准定义的几个关键字有效，非法值会被忽略，退回到浏览器默认行为。
合法值包括：auto、none、pan-x、pan-y、pinch-zoom、manipulation，以及它们的组合（用空格分隔，如 pan-x pinch-zoom）。
-
auto：完全交由浏览器决定哪些手势可用（比如<input>默认可双击放大，<div>默认可双指缩放） -
none：禁用所有原生触摸手势，包括滚动、缩放、长按菜单等 -
pan-x/pan-y：仅允许水平/垂直方向的滚动（注意：不等于“禁止缩放”，缩放仍可能触发） -
pinch-zoom：显式启用双指缩放（但需配合pan-x或pan-y才能同时滚动+缩放） -
manipulation：等价于pan-x pan-y pinch-zoom，是常用简写，但不支持双击缩放（iOS Safari 13+ 才开始有限支持）
为什么设置了 pan-x 却还是无法横向滚动
常见现象是给容器加了 touch-action: pan-x，但手指拖动时页面没反应——这通常不是 touch-action 本身的问题，而是滚动前提未满足。
横向滚动要生效，必须同时满足：
立即学习“前端免费学习笔记（深入）”；
- 容器有明确的
width和overflow-x: auto（或scroll） - 子元素总宽度 > 容器宽度（即存在溢出）
- 没有其他样式阻止滚动，例如
overscroll-behavior-x: contain或父级touch-action: none - 在 iOS Safari 上，
pan-x对position: fixed元素无效（它会降级为auto）
示例错误写法：div { touch-action: pan-x; } —— 缺少 overflow-x 和内容溢出，纯属无效设置。
pinch-zoom 在不同浏览器中的兼容性差异
pinch-zoom 行为在各平台差异明显，尤其在移动端 Webview 中容易踩坑：
- iOS Safari：从 9.3 开始支持，但仅对
<img>、<video>等媒体元素或设置了user-scalable=yes的<meta name="viewport">生效；纯div加pinch-zoom不会触发缩放 UI - Android Chrome：支持较好，但若页面
<meta>中含user-scalable=no，pinch-zoom会被强制忽略 - 桌面端 Chrome（触屏模式）：支持
pinch-zoom，但仅限于页面缩放（非元素局部缩放），且需用户主动开启触控板缩放手势
真正可控的缩放交互，往往得结合 transform: scale() + touchstart/move 手动实现，pinch-zoom 更适合作为“辅助开关”而非核心逻辑。
manipulation 值的隐藏副作用
manipulation 看似方便，但它在部分场景下会悄悄改变交互体验：
- 禁用双击缩放（double-tap to zoom）：这是最常被忽略的一点。即使页面
<meta>允许缩放，manipulation也会让双击失效 - 移除长按呼出菜单（如“复制”“搜索”）：在 Android Chrome 中，
manipulation会让文本节点失去长按响应 - 影响
click事件延迟：启用manipulation后，移动端 click 300ms 延迟会被移除（这是优点），但若同时监听了touchstart和click，可能因事件流变化导致逻辑错乱
所以不要无脑全局设 * { touch-action: manipulation }，尤其当页面含表单、可选中文本、或依赖双击操作时，得逐元素评估。
