禁用双击缩放需同时设置 maximum-scale=1.0 和 user-scalable=no，缺一不可；initial-scale=1.0 必须显式声明，minimum-scale 不得使用，数值必须为小数（如 1.0），且 meta 标签须在 head 中初始加载时存在。
meta viewport 里禁用双击缩放的关键参数
移动端双击缩放默认开启，仅靠 user-scalable=no 并不能完全阻止——尤其在 iOS Safari 中，它只禁用「手势缩放」，但双击仍会触发短暂缩放再回弹，体验上等于没禁。
真正起效的是组合控制：maximum-scale=1.0 + user-scalable=no，且必须同时存在。iOS 会把 maximum-scale 当作硬性上限，双击时无缩放空间可分配。
-
initial-scale=1.0要写，否则部分 Android 浏览器可能忽略maximum-scale - 不要写
minimum-scale，它会干扰双击行为判断，反而导致异常回弹 - 值必须是小数（如
1.0），写成1在旧版 iOS 上可能失效
为什么 user-scalable=no 单独无效
iOS Safari 的实现逻辑是：双击缩放属于「瞬态缩放」，不经过用户主动 pinch 手势流，user-scalable=no 只拦截后者。而 maximum-scale=1.0 是布局引擎级限制，双击计算缩放目标时直接被截断。
实测中，仅设 user-scalable=no 的页面，在 iPhone 上双击标题或图片，仍会出现约 0.2 秒的放大 → 回弹动画，视觉上就是“抖一下”。
- Android Chrome 多数版本对
user-scalable=no响应更严格，但不能依赖——不同厂商 WebView 行为不一 - 若页面有
input或textarea，双击聚焦时 iOS 仍会轻微缩放以适配光标，这是系统级行为，meta 无法干预
完整可靠的 meta 写法示例
以下 <meta> 标签能覆盖绝大多数场景：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
注意顺序无关紧要，但缺一不可。漏掉 initial-scale=1.0 会导致某些 Android 机型首次加载时无视 maximum-scale。
- 不要加
shrink-to-fit=yes（已废弃，且干扰 scale 计算） - 避免使用
target-densitydpi（仅旧 Android 支持，现代浏览器忽略） - 如果页面需支持横屏旋转，该配置依然有效；但旋转后若 viewport 宽度变化，需确保 CSS 适配，否则可能触发意外缩放
真机测试时容易忽略的边界情况
开发时用 Chrome DevTools 模拟器测试没问题，不代表真机 OK。iOS 16+ 和部分 Android 14 WebView 对 viewport 解析更严格，以下问题常被忽略：
- 页面内动态插入新
<meta name="viewport">不生效——必须在初始加载时存在 - 使用 Web Components 或 Shadow DOM 时，若组件内嵌了独立 viewport meta，可能与主文档冲突，优先级以第一个为准
- 微信内置浏览器（X5 内核）对
maximum-scale=1.0支持不稳定，建议额外监听touchstart并preventDefault()双击事件（仅作为兜底）
双击缩放不是纯 CSS 问题，也不是 JS 能完全接管的行为，meta 配置是第一道也是最关键的防线。参数写错一个点，就可能让整个防缩放策略失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
