必须同时设置 minimum-scale=1.0 和 maximum-scale=1.0 才能禁用缩放，仅 user-scalable=no 在 iOS 10+ 和现代安卓浏览器中失效；viewport 必须静态写在 head 最早位置，且需配合 touch-action: manipulation（作用于按钮本身）和 document.documentElement 上的 gesturestart/touchend 拦截。
viewport 设置必须包含 maximum-scale=1.0
只写 user-scalable=no 在 iOS 10+ 和现代安卓浏览器中已完全失效，系统会静默忽略。真正起效的是 maximum-scale=1.0 和 minimum-scale=1.0 的组合——它们被浏览器当作硬性约束执行，而非可选提示。
常见错误是漏掉 initial-scale=1.0：若缺失该项，maximum-scale=1.0 在部分旧 WebView（如 UC 浏览器）中会直接不生效。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">必须静态写在<head>最早位置，JS 动态插入无效 - 如果按钮所在页面存在内容溢出（
document.documentElement.scrollHeight > window.innerHeight），iOS Safari 仍会允许双指缩放，此时 viewport 仅控制初始渲染
touch-action: manipulation 要加在按钮本身上
touch-action: manipulation 不是全局开关，只对设了该样式的元素生效。它让浏览器跳过双击判断逻辑，既消除 300ms 点击延迟，也顺带阻止该元素上的双击缩放。
不能写在 body 或 html 上幻想一劳永逸——iOS Safari 对 body 的双击仍会触发页面级缩放。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 正确写法：
button, .btn, [data-role="submit"] { touch-action: manipulation; } - 避免写
* { touch-action: manipulation; }，否则轮播图横向滑动、图片双击放大等功能全部失效 - 父容器若设了
touch-action: auto（默认值），子按钮的manipulation才能生效；若父级设了none，子级会被覆盖
必须监听 document.documentElement 拦截 touchend
双击缩放本质是两次 touchend 事件间隔 ≤ 300ms，仅靠 dblclick 事件监听完全不可靠——移动端 Safari 根本不触发该事件，它走的是原生手势路径。
关键点在于：必须绑定到 document.documentElement，而不是 body 或具体按钮，否则 iframe、弹窗遮罩层等场景会漏拦截。
- 需要缓存时间戳：
let lastTouchEnd = 0; - 监听时必须传
{ passive: false }，否则preventDefault()在 Chrome/Safari/Edge 中被静默忽略 - 示例代码：
document.documentElement.addEventListener('touchend', e => {<br> const now = Date.now();<br> if (now - lastTouchEnd <= 300) e.preventDefault();<br> lastTouchEnd = now;<br>}, { passive: false });
gesturestart 是 iOS Safari 特有但最彻底的拦截点
gesturestart 在双指触控刚发生时就触发，比 touchstart 更早，且专为缩放手势设计。iOS Safari 对它的响应最稳定，是 viewport 失效后的兜底防线。
仅监听 touchstart 并判断 event.touches.length > 1 有一定概率漏掉——尤其在快速捏合起始瞬间。
- 必须绑定到
document.documentElement，同样要加{ passive: false } - 一行即可：
document.documentElement.addEventListener('gesturestart', e => e.preventDefault(), { passive: false }); - Android Chrome 不支持该事件，但也不依赖它；iOS 设备没这句，双指缩放大概率仍会生效
实际项目里最容易被忽略的，是把所有拦截逻辑放在 DOMContentLoaded 之后——而 gesturestart 和首次 touchend 可能在 DOM 加载完成前就发生了。应该立即执行，或至少确保 script 标签带 defer 且位于 <head> 底部。
