按钮级防双击缩放的正确写法是为可点击元素显式设置 touch-action: manipulation，而非全局配置或依赖默认行为；需配合 viewport 元标签锁定缩放，并避免 touch-action: none 等破坏基础交互的错误用法。
touch-action: manipulation 是按钮级防双击的正确写法
给可点击元素加 touch-action: manipulation，才能真正抑制其触发双击缩放。这不是“全局禁用”，而是告诉浏览器：“这个元素只做轻点响应，别等第二次点击、也别尝试缩放”。iOS Safari 对 button、[type="submit"] 等原生控件默认不走该逻辑，必须显式声明。
常见错误包括：
- 写成
* { touch-action: manipulation; }—— 会破坏轮播图滑动、地图拖拽等依赖 touch-action 的交互 - 父容器设了
touch-action: none—— 子元素的manipulation被继承覆盖，完全失效 - 只加在
div上却不加role="button"或tabindex—— 浏览器不识别为可操作元素，样式不生效
推荐写法：button, .btn, [role="button"], [data-role="action"] { touch-action: manipulation; }
touch-action: pan-x pan-y 不是禁用缩放，而是降低误触发概率
touch-action: pan-x pan-y 的作用是让浏览器明确“这个区域只允许横向或纵向平移”，从而大幅减少把双指张开、快速双击识别为缩放手势的概率。但它不禁止缩放本身，也不影响用户在其他区域（比如空白处）缩放。
使用时注意：
- 全局写
* { touch-action: pan-x pan-y; }看似省事，但会导致输入框无法双击选中文本、图片无法双击放大查看——实际项目中极少适用 - 更合理的是按容器职责划分：
.carousel { touch-action: pan-x; }、.list-container { touch-action: pan-y; } - IE/Edge 需补
-ms-touch-action: pan-x pan-y，现代浏览器无需前缀 - 若页面内容高度超出视口（
document.documentElement.scrollHeight > window.innerHeight），iOS 会强制启用双指缩放查看溢出区，此时touch-action完全无效
touch-action: none 不能禁用双击缩放，反而会毁掉所有触摸交互
有人试过给 html 或 body 加 touch-action: none，发现双击缩放确实没了，但页面也彻底“失活”：滚动卡死、按钮点不动、输入框无法聚焦。这是因为 none 表示“不处理任何触摸行为”，浏览器直接跳过事件分发，连 click 和 scroll 都被拦腰截断。
它和缩放控制无关，只影响事件流分发路径。真实场景中，只有极少数嵌入式 WebView 或特定 kiosk 模式才可能用到，且必须搭配 JS 手动模拟所有交互。
不要写：body { touch-action: none; }；也不要写：html { touch-action: none; }——这等于主动放弃移动端基本可用性。
touch-action 单独用无效，必须配合 viewport 锁定
touch-action 是第二道防线，不是第一道。如果 <meta name="viewport"> 没写全，或者动态插入、位置靠后，CSS 层再怎么设都救不回来。
关键约束有三点：
-
width=device-width和initial-scale=1.0必须同时存在，否则minimum-scale/maximum-scale可能被忽略 -
minimum-scale=1.0和maximum-scale=1.0是当前最广泛兼容的硬性缩放边界，user-scalable=no已在 iOS 10.3+ 和主流安卓浏览器中被系统忽略 - 该
<meta>标签必须静态写在最开头，JS 动态注入的完全无效
正确示例：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
复杂点在于：哪怕 viewport 和 CSS 全部到位，iOS 的 gesturestart 事件仍可能绕过它们触发缩放——这时候必须用 JS 监听并 preventDefault()，否则就是白忙活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
