実行できるHTMLドキュメント: meta viewport

Q: 標準の meta viewport タグはどう書きますか？

を に書きます。ほぼすべてのレスポンシブなページではこれが正解です。

Q: meta viewport が効かないのはなぜですか？

タグが の中にあるか、name が viewport か、値がカンマで区切られているかを確認しましょう。それでも横スクロールするなら、固定幅、大きな画像、長い単語など、画面より広い要素があります。デバイスより広い CSS はこのタグでは直せません。

使うべきタグ

すべてのページの <head> にこの 1 行を書きます。

<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 ピクセルの幅でレイアウトし、全体を画面に収まるよう縮小します。下の 2 台のスマートフォンの模型は同じページを読み込んでいて、一方は 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>

1 台目のスマートフォンでは 16px のテキストがとても小さくなり、読者はピンチで拡大しなければなりません。2 台目では読みやすいままで、@media (max-width: 600px) のルールが一致するので列が縦に並びます。これがタグのもう 1 つの役割です。メディアクエリが見るのはレイアウトの幅なので、タグがないとスマートフォンは 980px と報告し、モバイル向けのスタイルが一切適用されません。show('with', 375) の 375 を 980 に変えると、2 台が同じ見た目になります。

タグは仕事の半分にすぎない

viewport タグで狭いレイアウトにはなりますが、CSS がそこに収まる必要があります。画面より広い固定幅の要素が 1 つあるだけで、ページ全体が横スクロールします。

<!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>

1 つ目の箱は横スクロールし、2 つ目は縮んで収まります。画像などの幅の広い要素には max-width: 100% を指定し、固定のピクセル幅より柔軟な幅 (パーセント、fr、flexbox) を使いましょう。

viewport の値

値	例	働き
`width`	`width=device-width`	レイアウトの幅。`device-width` は CSS ピクセルでの画面の幅。数値も指定できるが、よい考えであることはまれ
`initial-scale`	`initial-scale=1`	ページを開いたときの拡大率
`minimum-scale` / `maximum-scale`	`maximum-scale=5`	ズームの制限。最大値が低いとズームできなくなるので、`maximum-scale` は書かない
`user-scalable`	`user-scalable=yes`	ピンチでのズームを許可するかどうか。書かない
`viewport-fit`	`viewport-fit=cover`	ノッチや角丸の下までページを広げる。`env(safe-area-inset-*)` の padding と組み合わせる
`interactive-widget`	`interactive-widget=resizes-content`	画面上のキーボードがレイアウトにどう影響するか。Android の Chrome が対応

値はカンマで区切ります。ノッチのあるスマートフォンで画面全体を使うページはこうなります。

<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 で入力欄をタップすると拡大されてしまうなら、原因は input のフォントサイズが 16px 未満であることです。ズームを無効にするのではなく、input の font-size を 16px 以上にしましょう。

よくある間違い

タグを書き忘れる。 メディアクエリが 980px のレイアウトを見るので、これがないとレスポンシブなスタイルシートはスマートフォンで何もしません。ページのテンプレートで title タグの隣に書きましょう。
値をセミコロンで区切る。 カンマを使います: width=device-width, initial-scale=1。
width=375 のように幅を決め打ちする。 画面の大きさはさまざまなので、device-width を使いましょう。
user-scalable=no や maximum-scale=1 でズームを無効にする。
横スクロールをタグのせいにする。 画面より広い要素を見つけて、柔軟な幅にしましょう。

よくある質問

meta viewport タグは何をしますか？

モバイルブラウザに、レイアウトの幅をどれくらいにするかを伝えます。これがないと、ほとんどのスマートフォンはページを約 980 CSS ピクセルの幅でレイアウトし、画面に収まるよう縮小します。width=device-width を指定するとレイアウトが画面の幅に合うので、テキストが読みやすくなり、メディアクエリも効きます。

標準の meta viewport タグはどう書きますか？

<meta name="viewport" content="width=device-width, initial-scale=1"> を <head> に書きます。ほぼすべてのレスポンシブなページではこれが正解です。

meta viewport が効かないのはなぜですか？

タグが <head> の中にあるか、name が viewport か、値がカンマで区切られているかを確認しましょう。それでも横スクロールするなら、固定幅、大きな画像、長い単語など、画面より広い要素があります。デバイスより広い CSS はこのタグでは直せません。

user-scalable=no や maximum-scale=1 を使うべきですか？

いいえ。どちらもズームを止めてしまいます。弱視のユーザーの多くはズームに頼っており、アクセシビリティの監査でも不合格になります。そもそも iOS の Safari は user-scalable=no を無視します。

meta viewport タグはデスクトップのブラウザに影響しますか？

しません。デスクトップのブラウザはこれを無視し、レイアウトの幅は単にウィンドウの幅になります。このタグが意味を持つのはスマートフォンとタブレットです。