viewport meta标签必须同时包含width=device-width、initial-scale=1.0、minimum-scale=1.0、maximum-scale=1.0和user-scalable=no才有效，缺一不可；单独写user-scalable=no在ios 13.4+和chrome 90+中被静默忽略，且标签须静态置于最前端。
viewport meta 标签必须这样写，否则无效
只写 user-scalable=no 已经不能禁用缩放——iOS 13.4+ 和 Chrome 90+ 会静默忽略它。真正起作用的是三者同时存在：minimum-scale=1.0、maximum-scale=1.0 和 initial-scale=1.0，且 width=device-width 必须在前。
-
width=device-width缺失时，Android 浏览器可能 fallback 到桌面视口宽度，导致maximum-scale失效 -
minimum-scale和maximum-scale必须相等且为1.0，单独写其中一个无效 - 标签必须静态写在
最早位置，JS 动态插入完全不起作用 - 推荐完整写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
为什么 iOS Safari 还能双指缩放？
iOS Safari 不是“不认 meta”，而是主动绕过：只要 document.documentElement.scrollHeight > window.innerHeight（即内容超出一屏），它就会无视所有缩放限制，启用双指缩放以查看溢出区域。
- 这不是 bug，是 Apple 强制保障可访问性的设计
- 加
html, body { height: 100vh; overflow: hidden; }能堵住，但会锁死所有滚动，轮播图、列表、弹窗全失效 - 更合理做法：保留滚动，对容器加
style="touch-action: pan-x pan-y"，比如轮播组件上设touch-action: pan-x - 若必须拦截，得靠 JS 监听
touchstart，不是靠 meta
input 聚焦后页面意外放大，怎么防？
iOS Safari 在聚焦小于 16px 的 <input> 或 <textarea></textarea> 时，会强制放大整个视口——这和 viewport 完全无关，是系统级行为。
- 给所有表单控件加
style="font-size: 16px;"，这是最直接有效的解法 - 避免全局设置
body { font-size: 14px; }或类似小字号样式 - 加
-webkit-text-size-adjust: 100%到html或body，防止 iOS 自动调整文本大小引发重排 - 注意：该问题在安卓部分 WebView 中也存在，但触发条件更宽松
JS 拦截多点触控，passive=false 是关键
当 viewport 失效时，唯一可靠兜底是监听手势源头。但现代浏览器默认开启 passive event listener，e.preventDefault() 在 { passive: true } 下会被静默忽略。
- 必须监听
document.documentElement，而非body，避免 iframe 或子容器干扰 - 双指缩放拦截：监听
touchstart，判断e.touches.length > 1，然后e.preventDefault() - 双击放大拦截：监听
touchend，缓存时间戳，两次间隔 ≤ 300ms 就e.preventDefault() - 所有监听都必须传
{ passive: false }，否则在 Safari/Chrome/Edge 中完全无效
<input> 聚焦、长按选中文本、快速双击空白处这几个动作。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
