HTML 中 meta viewport 怎么设置才能适配移动端

结论先给：移动端页面只需要在 <head> 里写一行 <meta name="viewport" content="width=device-width, initial-scale=1">，全面屏再加一个 viewport-fit=cover，其余参数默认都别加。不写这行，手机浏览器会按 980px 的宽度排版再整体缩小，字号肉眼看着只有 4-5px。

meta viewport 是什么，不写会怎样？

结论：viewport meta 用来告诉浏览器「用多宽的布局视口来排版页面」，不写它，iOS Safari 和 Android Chrome 默认按 980px 渲染再等比缩小。

这里有两个概念要分清：布局视口（layout viewport，CSS 布局时参照的宽度）和视觉视口（visual viewport，用户实际看到的区域）。不写 meta viewport 时，布局视口被设成 980px，页面按 PC 宽度排版，然后被缩放到屏幕宽度里，用户必须双指放大才能读文字。这也是 2010 年 iOS Safari 引入这个标签的原因，后来 Android Chrome、Firefox 全部跟进。

width=device-width 到底是什么意思？

结论：width=device-width 让布局视口宽度等于设备的 CSS 像素宽度，iPhone 12 是 390px，iPhone SE 是 375px，多数安卓机是 360px。

注意是 CSS 像素不是物理像素：iPhone 12 物理分辨率 1170×2532，devicePixelRatio 为 3，所以 CSS 宽度是 1170 ÷ 3 = 390。这也是为什么 CSS 里不需要做任何缩放，直接按 390px 写布局就行。

initial-scale=1 能不能省？

结论：建议保留，它把初始缩放比例设为 1，能避免 iOS 在横竖屏切换后把页面放大。

Safari 在只写 width=device-width 时，横屏再转回竖屏可能出现缩放错乱；两个都写时，Safari 以 initial-scale 为准，部分旧版安卓 WebView 以 width 为准。所以两个同时写是覆盖最广的写法，代价只是多几个字符。

要不要加 maximum-scale=1 和 user-scalable=no？

结论：不要加。iOS 10 起 Safari 已经直接忽略 user-scalable=no 和小于 3 的 maximum-scale，加了也不生效，反而会让 Lighthouse 无障碍审计报错、违反 WCAG 1.4.4（要求文本可放大到 200%）。

如果你的需求是「禁止双击放大」，正确做法是用 CSS 的 touch-action: manipulation 处理点击延迟，而不是禁掉整个页面的缩放权限。真正需要锁死缩放的场景只有全屏游戏、Canvas 应用这类交互，普通内容页不要这么做。

viewport-fit=cover 什么时候必须加？

结论：当页面背景需要延伸到 iPhone 刘海或底部 Home 指示条区域时加，不加则浏览器会自动加白边。

写法是把 viewport-fit=cover 追加到 content 里，然后用 CSS 环境变量留出安全区：

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

.footer {
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

safe-area-inset-top / bottom / left / right 四个变量分别对应四边安全距离。iOS 11.0–11.2 只认 constant()，需要写两行做回退；11.2 之后统一用 env()。

为什么不要写 width=750 或 width=640？

结论：写死宽度会让 390px、430px 等非 375px 的设备整体缩放，文字发虚、点击热区偏移，除非你同时在用 rem 等比缩放方案，现在已不推荐。

老方案是 width=750 + document.documentElement.style.fontSize 动态计算 rem，问题在于大屏手机上元素被等比放大、字变得巨大，且无法用媒体查询做断点。现在的做法是 width=device-width + flex/grid 流式布局，需要断点时用媒体查询，常见断点是 768px（平板竖屏）和 1024px（平板横屏）。

怎么验证设置生效了？

结论：用 Chrome DevTools 的设备工具栏加三行 JS 就能确认。

打开 DevTools → Toggle device toolbar（Ctrl+Shift+M），选 iPhone 12 后执行：

console.log(window.innerWidth);                    // 期望 390
console.log(document.documentElement.clientWidth); // 期望 390
console.log(window.visualViewport.scale);          // 期望 1
console.log(window.devicePixelRatio);              // 期望 3

visualViewport.scale 不等于 1，说明初始缩放没生效，通常是 initial-scale 写错或被后出现的 viewport 标签覆盖。同一页面只保留一个 viewport 标签，并且要放在 <head> 靠前位置。

完整的推荐模板

结论：直接复制下面这段即可覆盖 99% 的移动端场景。

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

需要全屏沉浸式体验（如视频、地图）再补 viewport-fit=cover 对应的 env() 内边距；需要限制缩放的交互型页面才考虑 user-scalable=no，但要清楚 iOS Safari 已忽略它。

一句话收束：viewport 的核心只有 width=device-width 和 initial-scale=1 两个参数，别写死宽度、别禁缩放，全面屏补 viewport-fit=cover 和 env(safe-area-inset-*)，然后用 DevTools 的 innerWidth 和 visualViewport.scale 验证一遍就完成了。