meta viewport 标签：width=device-width 详解

应该使用的标签

在每个页面的 <head> 中加上这一行：

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

width=device-width 让布局与屏幕一样宽，initial-scale=1 让页面以 100% 的缩放比例打开。大多数网站只需要这些。下面是一个加上了这个标签的完整页面：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Viewport</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Hello, phone</h1>
  <p id="out"></p>
  <script>
    const meta = document.querySelector('meta[name="viewport"]');
    document.getElementById('out').textContent =
      'Viewport tag: "' + meta.content + '". Layout width here: ' + innerWidth + 'px.';
  </script>
</body>
</html>

脚本读取了这个标签和布局宽度。桌面浏览器会忽略 viewport 标签，所以在这个预览中，宽度就是预览框的宽度。在手机上，因为有这个标签，同一个文件报告的是手机的宽度（通常为 360 至 430 个 CSS 像素）。

没有它时手机会怎样

找不到 viewport 标签的移动浏览器会认为页面是为电脑设计的。它会按大约 980 像素的宽度排版页面，再把整个页面缩小以适应屏幕。下面两部模拟手机加载的是同一个页面，一个按 980px 排版，一个按手机宽度排版，两者都缩放到相同的大小：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>With and without</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .phones { display: flex; gap: 24px; flex-wrap: wrap; }
    figure { margin: 0; width: 180px; }
    .phone { width: 180px; height: 320px; overflow: hidden; border: 6px solid #111827; border-radius: 16px; }
    iframe { border: 0; transform-origin: 0 0; background: #fff; }
    figcaption { font-size: 13px; margin-top: 6px; }
  </style>
</head>
<body>
  <div class="phones">
    <figure>
      <div class="phone"><iframe id="without" title="Page at 980px"></iframe></div>
      <figcaption>No viewport tag: laid out at 980px, shrunk</figcaption>
    </figure>
    <figure>
      <div class="phone"><iframe id="with" title="Page at 375px"></iframe></div>
      <figcaption>With the tag: laid out at 375px</figcaption>
    </figure>
  </div>
  <script>
    const page = `<style>
      body { font: 16px system-ui, sans-serif; margin: 12px; }
      .cols { display: flex; gap: 12px; }
      .cols div { flex: 1; background: #dbeafe; padding: 12px; }
      @media (max-width: 600px) { .cols { flex-direction: column; } }
    </style>
    <h1>My site</h1>
    <p>This paragraph is set at 16px, a comfortable size to read.</p>
    <div class="cols"><div>Column one</div><div>Column two</div></div>`;
    function show(id, layoutWidth) {
      const frame = document.getElementById(id);
      const scale = 180 / layoutWidth;
      frame.width = layoutWidth;
      frame.height = Math.round(320 / scale);
      frame.style.transform = 'scale(' + scale + ')';
      frame.srcdoc = page;
    }
    show('without', 980);
    show('with', 375);
  </script>
</body>
</html>

在第一部手机上，16px 的文字变得很小，读者不得不用双指缩放。在第二部手机上，文字依然清晰，而且因为 @media (max-width: 600px) 规则生效，各列会上下堆叠。这就是这个标签的第二个作用：媒体查询看到的是布局宽度，所以没有这个标签，手机报告的是 980px，你的移动端样式永远不会生效。把 show('with', 375) 中的 375 改成 980，两部手机看起来就一样了。

标签只完成了一半的工作

viewport 标签给了你一个窄布局；你的 CSS 必须能放得进去。只要有一个元素的固定宽度超过屏幕，整个页面就会横向滚动：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fitting the width</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .screen { width: 300px; border: 2px solid #111827; padding: 8px; margin-bottom: 12px; overflow-x: auto; }
    .banner { background: #f59e0b; height: 60px; }
    .fixed { width: 480px; }
    .fluid { max-width: 100%; width: 480px; }
  </style>
</head>
<body>
  <p>A 300px wide screen:</p>
  <div class="screen"><div class="banner fixed">width: 480px</div></div>
  <div class="screen"><div class="banner fluid">max-width: 100%</div></div>
</body>
</html>

第一个盒子可以横向滚动；第二个会缩小以适应。给图片和其他宽元素设置 max-width: 100%，并且优先使用弹性宽度（百分比、fr、flexbox），而不是固定的像素宽度。

viewport 的取值

各个值用逗号分隔。在有刘海的手机上铺满整个屏幕的页面是这样写的：

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<style>
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
</style>

不要禁止缩放

你会在一些旧模板中看到这个标签：

<!-- Avoid: stops people from zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

它会阻止双指缩放，而视力不佳的人依赖缩放，Lighthouse 等无障碍检查工具也会标记它。iOS 上的 Safari 会忽略 user-scalable=no，所以这个标签甚至无法稳定生效。如果在 iPhone 上点击表单字段时页面会放大，原因是输入框的字号小于 16px；请把输入框的 font-size 设为至少 16px，而不是禁用缩放。

常见错误

• 忘了加这个标签。 没有它，响应式样式表在手机上毫无作用，因为媒体查询看到的是 980px 的布局。在页面模板中把它放在 title 标签旁边。
• 值之间用分号分隔。 请用逗号：width=device-width, initial-scale=1。
• 把宽度写死，比如 width=375。屏幕尺寸各不相同；请使用 device-width。
• 用 user-scalable=no 或 maximum-scale=1 禁用缩放。
• 把横向滚动归咎于这个标签。 找出比屏幕更宽的那个元素，给它设置弹性宽度。