禁用缩放是为了防止viewport计算失准导致布局崩溃，user-scalable=no单独无效；必须组合maximum-scale=1.0、minimum-scale=1.0、user-scalable=no，且meta须静态写在head最前。
禁用缩放不是为了“让页面看起来更稳”，而是为了防止 viewport 计算失准导致布局崩溃——尤其是 float、fixed、百分比宽度等依赖视口尺寸的 CSS 特性。
user-scalable=no 单独写根本没用
它在 iOS Safari 10.3+ 和多数新版 Android 浏览器中已被系统级可访问性策略忽略。只写 user-scalable=no，双指捏合可能暂时不响应，但双击放大、系统字体缩放、辅助功能开关仍会触发缩放，且 fixed 元素位置直接错位。真正起效的是组合：maximum-scale=1.0 + minimum-scale=1.0 + user-scalable=no，三者缺一不可。
缩放后 float 元素突然换行或留白
这不是 CSS 写错了，是亚像素四舍五入被放大后的必然结果。例如 width: 50% 的两个浮动盒子，在缩放 1.2 倍时，浏览器按原始视口算出的像素值（比如 187.5px）被四舍五入成 188px，两盒加起来就超了父容器，第二盒被迫换行。这类问题在 user-scalable=yes 下高频出现，禁用缩放只是止血，根治方案是改用 display: flex 或 grid。
input 聚焦时 iOS 自动放大，仅靠 CSS 拦不住
CSS 的 font-size: 16px 或 width: 100% 只能降低触发概率，不能阻止。iOS Safari 在输入框获得焦点且内容过小或容器过窄时，会强制放大整个 visual viewport 来提升可读性——这个行为只能由 viewport meta 控制。必须同时满足：user-scalable=no 和 maximum-scale=1.0，否则 Safari 直接跳过。
JS 拦截是兜底，不是替代
当 viewport 配置被第三方库覆盖、或嵌入 iframe 中失效时，才需要 JS 补救。关键点：
• 必须监听 document.documentElement，而非 body 或某个 div
• touchstart 里判断 event.touches.length > 1 并调用 event.preventDefault()
• 传 { passive: false }，否则 Chrome/Safari 会静默忽略
• 双击拦截需记录 touchend 时间戳，间隔 ≤ 300ms 就 prevent
最常被忽略的一点：viewport meta 必须静态写在 最早位置，JS 动态插入完全无效；而很多 Vue/React 项目通过 JS 注入 meta，真机上等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
