touch-action: manipulation 能局部禁用双击缩放，仅对设该样式的元素生效，不全局控制；它通过跳过双击判断消除300ms延迟并阻止双击行为，但需配合viewport配置与js拦截才能可靠禁用缩放。
touch-action: manipulation 能不能禁用双击缩放
能，但只对加了该样式的元素生效，不是全局开关。它告诉浏览器：“这个区域只做点击、滚动，别等第二次 tap 做双击缩放判断”，从而直接消除 300ms 延迟，也顺带禁掉双击行为。
常见误用是给 body 或 html 设 touch-action: manipulation，以为能一劳永逸——其实它不会影响页面级双击缩放，iOS Safari 仍会响应 body 上的双击。真正起效的是 viewport 配置，touch-action 只是局部加固。
- 适用对象：按钮、卡片、开关、弹窗关闭叉等明确点击目标
- 写法示例：
button, .btn, [data-role="toggle"] { touch-action: manipulation; } - 不要写
* { touch-action: manipulation; }，否则横向滚动、图片双击放大等功能全失效 - 父级若设了
touch-action: none，子元素的manipulation会被覆盖，需检查层叠
为什么只加 touch-action: none 还是能缩放
touch-action: none 确实会禁用所有原生触摸行为，但它受 CSS 层叠规则约束：浏览器取“最近的非 auto 值”生效。如果只是给某个 div 加了 none，而它的父容器（比如 body）仍是默认 auto，那双指缩放依然由 body 触发。
更关键的是，touch-action 不管 viewport 是否允许缩放——它只控制“手势是否交由浏览器处理”。如果 viewport 本身开着 user-scalable=yes，而你又没在根元素上设 none，用户照样能捏合。
- 真要靠 CSS 全局禁用，得写：
html, body { touch-action: none; } - 但仅这样还不够，iOS Safari 仍可能对
body上的双击执行缩放（尤其在无 viewport 或配置不全时） - 必须配合 JS 拦截：
document.addEventListener('gesturestart', e => e.preventDefault(), { passive: false }); - Android Chrome ≥ 61 支持
pan-y pinch-zoom，比none更精细：保留滚动，禁用双击
viewport 和 touch-action 必须配合才可靠
单独依赖任一方案都会漏掉真实设备上的例外路径。比如 iOS Safari 10.3+ 完全无视 user-scalable=no，但依然尊重 maximum-scale=1.0；而某些安卓厂商 WebView 会绕过 touch-action，却老老实实按 viewport 执行。
所以生产环境必须双管齐下：
- viewport 写全：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 根元素加兜底：
html { touch-action: manipulation; }（比none更安全） - 关键交互区强化：
button, input, select { touch-action: manipulation; } - 防 gesturestart 漏网：
document.addEventListener('gesturestart', e => e.preventDefault(), { passive: false });
注意：user-scalable=no 必须静态写在 HTML 里，JS 动态插入的 viewport meta 在 iOS Safari 中被忽略。
哪些缩放行为 touch-action 根本管不了
touch-action 只干预“用户主动触发的手势”，对系统级或浏览器内部行为无能为力：
- iOS Safari 地址栏展开/收起时的临时缩放重置（纯系统行为，无法拦截）
- 页面嵌在
<iframe></iframe>中，且父页面未设sandbox="allow-scripts allow-same-origin"（WKWebView 会忽略子帧 viewport） - 第三方 UI 库（如 Ionic）初始化时重写 viewport meta，覆盖你的设置
- 用户长按链接/图片唤出系统菜单后，再双击——此时已脱离常规 touch 流程，
touch-action失效
最易被忽略的是：开发工具里开启 “Device Toolbar” 后手动缩放，这只是模拟器行为，和真机逻辑无关。验证必须上真机，用手指实实在在捏合两次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
