viewport标签必须放在<head>内且越靠前越好，浏览器解析到即生效；放<body>中、动态插入或位置靠后均无效。
viewport 标签写在哪？必须放 <head> 里
它不能出现在 <body> 中，也不能放在其他标签内部。浏览器只在解析 <head> 阶段读取 viewport 指令，放错位置等于没写。
常见错误是把它塞进某个 <div> 或紧挨着 <title> 下面但漏了闭合、拼错成 viewpoint——这些都会导致完全失效。
- 正确位置：
<head>内，通常紧跟<title>后或<meta charset>之后 - 必须有
name="viewport"，缺这个属性浏览器直接忽略整条 meta - 值要用双引号包裹，比如
content="width=device-width, initial-scale=1"，单引号或不加引号在部分旧浏览器中可能出问题
最常用且安全的写法是 width=device-width, initial-scale=1
这是响应式页面的起点，不是“可选配置”，而是现代移动端显示的基础保障。不写这句，iOS Safari 和 Android Chrome 默认按 980px 宽度渲染，文字小到看不清，用户得双指放大才能阅读。
-
width=device-width：让页面宽度匹配设备物理视口宽度（不是分辨率，是 CSS 像素宽度） -
initial-scale=1：初始缩放为 1:1，避免系统自动缩放 - 不要加
user-scalable=no——它会禁用用户缩放，在可访问性上违规，WCAG 不通过 - 别写
maximum-scale=1或minimum-scale=1，除非你明确要锁死缩放（几乎不需要）
需要适配横屏或特殊设备时，慎加 minimum-scale 和 target-densitydpi
target-densitydpi 是 Android 4.3 及更早版本的私有属性，已废弃多年，Chrome 和新版 WebView 完全忽略它。加了不仅无效，还可能干扰其他 meta 解析。
立即学习“前端免费学习笔记（深入）”；
minimum-scale 看似能防止用户缩得太小，但实际会导致横屏时内容被裁切、触发横向滚动条，尤其在折叠屏或平板横置场景下表现极差。
- 横屏适配靠 CSS 媒体查询（
@media (orientation: landscape)），不是靠 viewport 缩放控制 - 如果真遇到某些老 Android 设备渲染异常，优先检查 CSS 单位（比如用了
px而非rem或vw），而不是硬塞 viewport 参数 - 所有 scale 类参数（
initial-scale除外）都容易引发 iOS Safari 的 input 聚焦抖动或软键盘遮挡问题
验证是否生效：用 DevTools 模拟设备后看 document.documentElement.clientWidth
光看页面“好像正常”不保险。打开 Chrome DevTools → 切换设备模拟 → 刷新页面 → 在 Console 输入 document.documentElement.clientWidth，返回值应该接近当前模拟设备的 CSS 宽度（如 iPhone SE 是 375，Pixel 5 是 412）。
- 如果返回 980 或 1024，说明 viewport 标签没生效（位置错、拼写错、被 JS 动态删了）
- 如果返回值忽大忽小（比如横竖屏切换后不变），可能是 JS 代码里动态修改了
<meta name="viewport">的content属性 - 注意：Safari 技术预览版和部分 PWA 环境下，viewport 行为略有差异，真机测试不可跳过
<head>，再查 Network 面板里最终返回的 HTML，比反复调参数更省时间。 
