必须同时设置 viewport 三参数并拦截 dblclick/gesturestart/touchend 事件才能彻底禁用 Safari 双击缩放：viewport 需包含 maximum-scale=1.0、minimum-scale=1.0 和 user-scalable=no；事件监听须绑定 document.documentElement 并设 {passive: false}，还需时间戳防 touchend 连击。
双击按钮导致整个页面意外放大，不是按钮本身的问题，而是 Safari（尤其是 iOS/iPadOS）把按钮区域识别为可缩放内容触发了原生手势。只靠 CSS 或按钮属性无法解决，必须从 viewport 控制 + 事件拦截双线入手。
viewport meta 标签必须写全三项参数
很多开发者只写 user-scalable=no，但 Safari 仍可能放大——缺了 maximum-scale=1.0 和 minimum-scale=1.0 就等于没锁死。这三项必须同时存在，且 content 值不能换行、不能有空格错位。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">- 该标签必须放在
<head>最前面，早于所有 CSS 和 JS 加载，否则动态插入的脚本可能覆盖它 - 如果页面由框架（如 Vue CLI、React App）生成，需确认 public/index.html 中已固化此 meta，而非仅靠 JS 动态注入
document 上监听 dblclick 和 gesturestart 并 preventDefault
viewport 只禁用用户手动缩放，但 Safari 对 dblclick 的底层响应仍会触发 zoom。必须显式捕获并阻止，且注意 {passive: false} —— iOS 15+ 若不设这个，preventDefault() 直接被忽略。
- 在
<body>底部或 DOM ready 后执行：document.documentElement.addEventListener('dblclick', e => e.preventDefault(), { passive: false });<br>document.documentElement.addEventListener('gesturestart', e => e.preventDefault(), { passive: false }); - 不要只绑在 button 上：Safari 的双击缩放判定基于视口内任意可聚焦/可交互元素，绑在
document.documentElement才能兜底 - 若使用 React/Vue，避免在组件挂载时重复添加监听器，建议统一在入口 JS（如 index.js）中注册一次
touchend 时间戳拦截防双击误判
某些场景下（比如按钮带 touch-action: manipulation），dblclick 事件可能不触发，但连续两次 touchend（间隔 ≤300ms）仍会触发缩放。这时得靠时间戳比对截断。
立即学习“前端免费学习笔记（深入）”；
- 声明全局变量：
var lastTouchEnd = 0; - 监听
document的touchend：document.addEventListener('touchend', function(e) {<br> const now = Date.now();<br> if (now - lastTouchEnd <= 300) {<br> e.preventDefault();<br> }<br> lastTouchEnd = now;<br>}); - 必须配合
touchstart中对多点触摸的拦截（event.touches.length > 1 && e.preventDefault()），否则双指捏合仍可能绕过 - 该逻辑对单点快速连击也生效，但实际用户极少在按钮上做 300ms 内双 tap，不影响正常使用
系统级关闭“缩放”辅助功能是兜底方案
如果以上都失效（常见于企业内网页、WebView 嵌套场景），说明缩放行为已脱离网页层控制。此时唯一可靠方式是关掉系统级开关，但它会影响所有网站，包括三指缩放等辅助功能。
- 路径：
设置 → 辅助功能 → 缩放 → 关闭“缩放”开关 - 该开关关闭后，Safari 不再响应任何双击/双指手势缩放，无需网页代码改动
- 缺点：用户失去全局缩放能力；优点：100% 有效，且不依赖 JS 执行时机或框架生命周期
- 适用于 Kiosk 设备、数字标牌、考试终端等封闭场景，不适合面向公众的 H5 页面
真正容易被忽略的是：viewport 和事件监听必须同时生效。只做前者，iOS 16+ 仍可能双击放大；只做后者，页面在横屏旋转后可能重置缩放状态。两者不是替代关系，是同一问题的两层防线。
