viewport 与移动端适配：meta 标签的完整解读

学完这篇你能拿到一份可以直接复制的 viewport 配置，并且知道每个参数为什么这么写、什么时候该动它。

第一步：先贴最小可用模板

绝大多数页面的起点就这一行，放在 <head> 里：

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

width=device-width 让布局视口等于设备逻辑宽度，initial-scale=1 保证初始不缩放。这两项是现代移动端适配的地基，缺了任意一项，部分安卓机型首次打开时会出现「渲染宽度和设备宽度对不上」的错位。

注意：viewport 标签必须写在 <head> 内且尽量靠前，放在 <body> 里无效。

第二步：四个参数到底在说什么

• width：布局视口宽度，写 device-width 或具体像素值（如 1200）
• initial-scale：初始缩放倍数，1 表示不缩放
• maximum-scale / minimum-scale：允许缩放的范围
• user-scalable=no：禁止用户双指缩放

前两个是必用项，后三个慎用。

注意：iOS 10 以上的 Safari 已直接忽略 user-scalable=no 和 maximum-scale，因为它违反无障碍规范。想限制手势，应该用 CSS 的 touch-action，而不是指望 viewport。

第三步：iPhone 刘海屏要加 viewport-fit

如果你的页面有吸底按钮、底部导航，必须处理安全区：

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

同时在 CSS 里读取环境变量：

.footer {
  padding-bottom: env(safe-area-inset-bottom);
}

env(safe-area-inset-*) 有 top / right / bottom / left 四个方向，横屏时左右也会产生安全区。

注意：不加 viewport-fit=cover，iOS 会自己给页面加白边，页面不会铺满；加了之后安全区的处理责任就转移到你身上，漏掉底部 inset，吸底按钮会被小白条盖住。

第四步：传统 PC 站点的另一套写法

如果做的是固定宽度 1200px 的老式 PC 官网，想让手机打开时「整体缩放查看完整版」，可以写：

<meta name="viewport" content="width=1200">

注意：不要同时写 width=1200 和 initial-scale=1，两者语义冲突，浏览器表现不一致。要缩放视图就别指定倍数。

第五步：viewport 只管视口，布局还得靠 CSS

设好 meta 只是第一步，真正让它「好看」的是这几条：

* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
@media (max-width: 768px) { /* 移动端样式 */ }
h1 { font-size: clamp(20px, 5vw, 32px); }

用媒体查询断点 + rem/vw 相对单位 + clamp() 流式字号，比写死 px 稳得多。单模板响应式就是靠这一套：一套 HTML，两套样式。

第六步：六个最容易踩的坑

1. iOS 输入框聚焦自动放大：input、textarea 字号小于 16px 时，Safari 会强行放大页面。把字号设成 ≥16px 最省事。
2. 100vh 不准：移动端地址栏会伸缩，100vh 常常超出可视区。改用 100dvh，或 JS 读 window.innerHeight 写 CSS 变量。
3. 1px 边框变粗：dpr=2 或 3 的设备上，1px 会被渲染成 2~3 物理像素。用 transform: scaleY(0.5) 伪元素方案，或直接写 0.5px（需 dpr ≥ 2）。
4. 横屏字体被放大：iOS 横屏会自动放大文字，加 -webkit-text-size-adjust: 100%。
5. 出现横向滚动条：先定位是哪个元素超宽，不要用 overflow-x: hidden 掩盖问题——那只是把内容裁掉了。
6. 动态改 viewport：用 JS 修改 content 属性（比如弹层时禁止缩放）虽然可行，但容易造成页面抖动和缩放状态混乱，能不用就不用。

小结

• 基础配置就一行：width=device-width, initial-scale=1
• 有吸底元素就加 viewport-fit=cover，并在 CSS 里补 env(safe-area-inset-*)
• user-scalable=no 在 iOS 上已失效，别依赖它
• PC 固定宽站点用 width=1200，且不要再配 initial-scale
• viewport 决定视口，布局还得靠媒体查询、相对单位和 max-width: 100%
• 高频三坑：iOS 输入框字号 <16px 放大、100vh 不准、1px 边框变粗