最简健壮写法是<meta name="viewport" content="width=device-width, initial-scale=1.0">，它使布局视口宽度匹配设备逻辑像素宽度并以1:1比例渲染，二者缺一不可；进阶适配全面屏可追加viewport-fit=cover。
viewport meta 标签到底控制什么
它不定义“缩放算法”，而是告诉浏览器如何计算初始缩放比例和可缩放范围。真正起作用的是 width、initial-scale、maximum-scale 这几个参数的组合，浏览器按自己的规则（比如 iOS WebKit）执行布局计算。
最常用且安全的写法是哪一种
绝大多数现代移动端页面应该用：
<meta name="viewport" content="width=device-width, initial-scale=1.0">这行代码让页面宽度匹配设备物理像素宽度（经 dpr 换算后），并禁用双击缩放前的自动缩放行为。
-
width=device-width是关键：它不是固定像素值，而是动态取设备的 CSS 像素宽度（例如 iPhone 14 Pro 的device-width是 430px，不是 1170px 物理像素） -
initial-scale=1.0必须显式写出，否则某些 Android 浏览器可能默认用 0.8–1.2 之间某个值 - 不要加
user-scalable=no—— 不仅影响可访问性，iOS 16+ 在某些场景下会忽略该指令
为什么加了 viewport 还是被缩放或错位
常见原因不是标签写错了，而是其他地方干扰了视口计算：
- 页面里有固定宽度的
<div style="width: 1200px">元素，强制触发横向滚动和缩放回退 -
font-size使用px单位且过大，导致文本溢出容器，间接触发缩放补偿 - 嵌入的第三方 SDK（比如某些广告 JS）会动态插入自己的
<meta name="viewport">，覆盖你写的那一行 - 在 Webview 中加载时，宿主 App 设置了
setUseWideViewPort(true)（Android）或viewportFit=cover（iOS），会覆盖 HTML 中的声明
需要适配刘海屏或全面屏怎么办
viewport 标签本身不处理安全区域，得靠 CSS 配合：
立即学习“前端免费学习笔记（深入）”；
- 用
env(safe-area-inset-top)等环境变量做内边距补偿，但必须配合viewport-fit=cover - 所以完整写法是：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-
viewport-fit=cover仅在 iOS Safari 和部分安卓 WebView 中生效；不支持时会被忽略，不影响基础布局 - 别指望它“修复”缩放逻辑——它只让页面渲染到屏幕边缘，安全区域还得靠 CSS 处理
真正难的不是写对这行 meta，而是确保整个 DOM 结构和 CSS 尺寸体系都基于相对单位（rem/vw/%）构建，否则 viewport 再准也没用。
