viewport meta 标签必须放在 中且越靠前越好，否则可能触发重排或缩放抖动；width=device-width 将布局视口设为设备逻辑像素宽，不写会导致移动端以桌面宽度渲染、文字过小；user-scalable=no 已被主流浏览器忽略且违反可访问性规范；最小完整写法为 。
viewport meta 标签写在哪才生效
必须放在 里，且越靠前越好——浏览器解析到它就立即应用，晚了可能已按默认视口渲染过一帧，再改会触发重排或缩放抖动。
常见错误是把它塞在 里，或者被其他脚本动态插入（此时完全无效）。
- 只允许出现在
中，不能用 JavaScript 动态创建后 append - 不要和
<title></title>或其他<meta>顺序颠倒——有些老安卓 WebView 对顺序敏感 - 一个页面只能有一个
viewportmeta，重复声明时以第一个为准，后面的被忽略
width=device-width 是什么意思，不写会怎样
width=device-width 告诉浏览器：把布局视口宽度设为设备物理屏幕的逻辑像素宽（即 CSS 像素），而不是默认的 980px 或 1024px。不写它，移动端页面会以桌面宽度渲染，文字小得看不清，用户得双指放大才能阅读。
注意：device-width 是运行时值，不是固定数字——iPhone 14 Pro Max 是 430px，iPad mini 是 768px，它自动适配。
立即学习“前端免费学习笔记（深入）”；
- 别写成
width=375这类固定值，会破坏在其他设备上的表现 - 别漏掉等号，
width device-width（缺=）会被整个忽略 - 某些旧版 UC 浏览器对
device-width解析有延迟，加initial-scale=1能兜底
user-scalable=no 为什么现在基本不用了
这个参数禁止用户缩放，但 iOS 10+ 和 Android Chrome 已默认忽略它；更重要的是，它违反 WCAG 可访问性要求，影响视力障碍用户阅读，很多应用商店审核会拒审。
真正需要禁缩放的场景极少，比如全屏游戏或 kiosk 模式，但此时更该用 touch-action: none + 阻止默认事件，而不是依赖 meta。
- 苹果官方文档明确说
user-scalable=no“may be ignored” - 即使生效，也会让
input聚焦时页面意外缩放（iOS 的 zoom-on-focus 行为） - 想防误触？用
touch-action: manipulation更可靠，且不影响可访问性
最小完整 viewport 写法及兼容性差异
最简可用、覆盖主流设备的写法是：<meta name="viewport" content="width=device-width, initial-scale=1">。多了 maximum-scale、minimum-scale 或 user-scalable 反而容易出问题。
Android WebView 60+ 和 iOS Safari 对 initial-scale=1 解析一致，但老版本（如 Android 4.4 WebView）在横屏时可能忽略 width=device-width，需配合 viewport-fit=cover（仅 iOS）处理刘海屏。
-
viewport-fit=cover只对 iOS 有作用，Android 忽略，加了也无害 - 不要写
target-densitydpi=device-dpi，这是已废弃的 Android 2.x 专属属性 - 如果用 Web App Manifest，
display: standalone下 viewport 行为不变，无需额外调整
真要调缩放边界，优先考虑 CSS zoom 或 transform 缩放容器，而不是在 meta 层硬控——后者不可逆、不可预测，尤其在多层 iframe 场景下极易失控。
