禁用移动端双击放大需viewport约束、CSS touch-action控制和JS手势拦截三层配合：viewport须含minimum-scale=1.0、maximum-scale=1.0且静态置于head最前；按钮等可点击元素加touch-action: manipulation；JS拦截touchstart（多指）和touchend（双击时间戳）。
禁用移动端页面的双击放大和默认缩放手势，不能只靠一个 user-scalable=no，它在 iOS 10.3+ 和主流安卓浏览器中已被系统忽略。真正有效的是“viewport 约束 + CSS 行为控制 + JS 手势拦截”三层配合，缺一不可。
一、viewport 必须写全且静态放在 head 最前
仅靠 user-scalable=no 已失效，必须同时指定缩放边界值，并确保初始渲染即生效：
-
width=device-width：保证视口宽度匹配设备 -
initial-scale=1.0：缺失会导致部分旧 WebView（如 UC）直接忽略maximum-scale -
minimum-scale=1.0和maximum-scale=1.0：这是当前最广泛兼容的硬性约束，浏览器会强制执行 - 该
<meta>标签必须静态写在<head>最开头，JS 动态插入完全无效
正确写法示例：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">二、按钮级防双击：加 touch-action: manipulation
双击放大常由按钮触发，仅设 viewport 不够——iOS Safari 对按钮的双击仍走原生路径。关键是在可点击元素上启用手势简化：
- 给所有按钮、提交控件加
touch-action: manipulation，例如：
button, .btn, [type="submit"] { touch-action: manipulation; } - 不要写
* { touch-action: manipulation; }，否则轮播图滑动、图片双击查看等功能全部瘫痪 - 父容器不能设
touch-action: none，否则子元素的manipulation会被覆盖
三、拦截底层手势：touchstart + touchend 时间戳
viewport 和 CSS 只能约束缩放范围，但无法阻止用户发起双指或快速双击。必须运行时拦截：
- 双指缩放：监听
document.documentElement的touchstart，检测event.touches.length > 1，立即preventDefault()，并传{ passive: false } - 双击放大：本质是两次
touchend间隔 ≤ 300ms，需缓存上一次时间戳，第二次到来时拦截 - 不要监听
dblclick：iOS Safari 根本不触发该事件，纯属无效
精简可靠代码片段：
document.documentElement.addEventListener('touchstart', e => {if (e.touches.length > 1) e.preventDefault();
}, { passive: false });
let lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', e => {
const now = Date.now();
if (now - lastTouchEnd lastTouchEnd = now;
}, { passive: false });
四、额外注意：内容溢出会让 viewport 失效
如果页面实际高度超出视口（document.documentElement.scrollHeight > window.innerHeight），iOS Safari 会自动启用双指缩放以查看溢出区域，此时所有 viewport 设置都形同虚设。
- 检查是否存在未清除的 margin/padding、浮动未闭合、绝对定位脱离文档流等导致高度异常的问题
- 避免
body { overflow: hidden; }这类粗暴写法，它可能影响滚动或焦点管理 - 优先用响应式布局和弹性单位（rem/vw）替代依赖缩放的设计逻辑
