真正起效的是 maximum-scale=1.0 + minimum-scale=1.0 组合，再叠加 touch-action: manipulation 和 js 事件拦截；viewport 必须静态写在 head 最顶部，且需监听 document.documentelement 的 touchend 并 preventdefault。
移动端按钮双击缩放无法单靠 user-scalable=no 拦住，iOS 10+ 和现代安卓浏览器已静默忽略该参数；真正起效的是 maximum-scale=1.0 + minimum-scale=1.0 组合，再叠加 touch-action: manipulation 和 JS 事件拦截 —— 缺一不可。
viewport 必须写全且静态放在 head 最早位置
只写 user-scalable=no 或漏掉 initial-scale=1.0 都会导致部分 WebView（如 UC、旧版微信内核）直接不生效。iOS Safari 对内容溢出（document.documentElement.scrollHeight > window.innerHeight）仍会启用双击缩放，此时 viewport 仅控制初始渲染，不是锁死开关。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">必须手写在最顶部，JS 动态插入无效 -
minimum-scale=1.0有可访问性风险，若项目需支持视障用户放大文字，应慎用，优先保留user-scalable=yes并靠其他手段约束按钮行为 - 若页面存在滚动内容，
overflow: hidden强制锁死 body 会破坏轮播、弹窗等交互，不推荐
touch-action: manipulation 必须作用于按钮本身
这不是全局开关，只对设了该样式的元素生效。它让浏览器跳过双击判断逻辑，既消除 300ms 点击延迟，也顺带阻止该元素上的双击缩放。写在 body 或 html 上完全无效 —— iOS Safari 对 body 的双击仍会触发页面级缩放。
- 正确写法：
button, .btn, [data-role="submit"] { touch-action: manipulation; } - 禁止写
* { touch-action: manipulation; }，否则轮播图横向滑动、地图拖拽、图片双击放大全部失效 - 若父容器设了
touch-action: none，子元素的manipulation会被覆盖，需检查层叠顺序和 computed style
必须监听 document.documentElement 拦截双击
双击缩放本质是两次 touchend 间隔 ≤ 300ms，dblclick 事件在 iOS Safari 中根本不会触发，它走原生手势路径。只绑在按钮上也不行 —— 用户可能在按钮空白处双击，事件目标不是按钮。
- 正确监听点：
document.documentElement，确保捕获全局触控终点 - 必须加
{ passive: false }，否则preventDefault()在现代 iOS/Chrome 中被静默忽略 - 示例逻辑：
let lastTouchEnd = 0; document.documentElement.addEventListener('touchend', e => { const now = Date.now(); if (now - lastTouchEnd - 仅靠这个不够：iOS 15+ 中快速双击后立刻捏合，可能绕过该事件，需配合
gesturestart拦截（iOS 特有）
双指缩放与按钮缩放是两套机制，别混用
如果业务真需要按钮支持双指缩放（比如可交互图表中的操作按钮），就不能禁用 user-scalable —— iOS 一旦设了 user-scalable=no，系统就不再派发任何多点触摸事件给 JS，你的双指逻辑根本收不到第二根手指的数据。
- 想实现按钮局部双指缩放：必须保留
user-scalable=yes，用transform: scale()+touchstart/touchmove手动计算两指距离比值，且所有坐标计算必须基于event.touches[0]和event.touches[1] - 切忌用
event.changedTouches判断双指，它只反映状态变化的触点，双指持续移动时可能为空 - 每次
touchstart和touchmove都要调用event.preventDefault()，否则 iOS/Android 会触发默认页面缩放或滚动 - 缩放中心点必须按两指中点动态设置：
transform-origin: ${midX}px ${midY}px，不能固定左上角
最易被忽略的是：viewport 设置只是“提示”，不是“指令”；touch-action 只影响样式所及元素；而 JS 拦截必须覆盖 document.documentElement 全局触点 —— 这三者各自有效范围不同，缺一个，双击缩放就可能从缝隙里钻出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
