必须同时设置 minimum-scale=1.0 和 maximum-scale=1.0 才能禁用缩放，仅 user-scalable=no 在 iOS 10+ 和现代安卓浏览器中失效；需配合 touch-action: manipulation（作用于按钮本身）及 document.documentElement 上的 gesturestart/touchend 拦截。
如何用 meta 标签禁用移动端双击缩放
直接加 <meta name="viewport" content="user-scalable=no"> 不再管用 —— 现代 iOS 和 Android 浏览器已忽略该属性，仅靠它无法真正阻止双击缩放。
user-scalable=no 为什么失效了
从 iOS 10+ 和 Chrome 56+ 开始，浏览器出于可访问性考虑，强制忽略 user-scalable=no。即使写了，用户仍可通过双击、双指捏合触发缩放，尤其在表单输入、图片查看等场景下更明显。
- Apple 官方文档明确说明：该值“may be ignored”
- Chrome 的行为策略与之同步，不提供绕过路径
- 部分安卓 WebView（如微信内置）仍支持，但不可依赖
真正有效的替代方案：监听并重置视口缩放
不能靠 meta 拦，就得靠 JS 主动干预。核心思路是：检测 scale 变化 → 立即重置为 1 → 阻止默认缩放行为。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 监听
touchstart和gesturestart，后者专捕双指手势（iOS 必须） - 用
document.documentElement.style.zoom = "1"或修改viewportcontent 属性都无效（已被浏览器屏蔽） - 唯一可靠方式：监听
resize或scroll事件间接感知缩放？不行 —— 缩放时不触发这些事件 - 正确做法：在
touchstart时记录初始screen.width / window.innerWidth比值，一旦发现比值变化（即缩放发生），立刻document.body.style.transform = "scale(1)"并transform-origin: 0 0配合重置
简版实操（兼容 iOS/Android）：
document.addEventListener('gesturestart', e => {
e.preventDefault();
});
document.addEventListener('touchstart', e => {
if (e.touches.length > 1) e.preventDefault();
}, { passive: false });
⚠️ 注意：passive: false 是关键，否则 preventDefault() 不生效；iOS Safari 要求 gesturestart + touchstart 双监听才稳定拦截双击缩放。
为什么不用 maximum-scale=1？
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no"> 中 maximum-scale=1 曾是主流写法，但它在 iOS 上仅限制初始缩放上限，不阻止用户后续双击放大 —— 实测中双击后页面仍会短暂放大再回弹，体验割裂且不可控。
- Android 大部分版本尊重
maximum-scale=1，但不保证所有 WebView - iOS 13+ 对该值的处理更宽松，尤其在横屏切换后易失效
- 该设置还会导致
input聚焦时页面自动缩放被禁止，影响可访问性（WCAG 不推荐）
真正要禁双击缩放，JS 拦截是目前唯一跨平台可靠的手段，meta 标签只能辅助设定初始视口，别指望它扛主责。
