<meta name="viewport">

viewport は <meta> 要素の name 属性の値で、ビューポートの初期サイズについてのヒントを与えます。指定した場合、 <meta> 要素の content 属性では、カンマ区切りで 1 つ以上の値として指定して、ビューポートに関する動作を定義します。

例えば、ビューポートを端末の幅に一致させ、コンテンツを 100% ズームで表示するように設定するには、次のようにします。

html

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

使用上のメモ

<meta name="viewport"> 要素には、次の追加属性があります。

content 属性は定義する必要があり、その値はビューポート関連のさまざまな動作を設定します。カンマで区切られたリスト内の次のキーワードを 1 つ以上受け入れます。

ウェブサイトをレンダリングするビューポートのピクセル数の幅を定義します。正の整数値、またはキーワード device-width が指定できます。

ビューポートの高さを定義します。正の整数値、またはキーワード device-height が指定できます。これはどのブラウザーでも使用されていません。

端末の幅（縦長画面の device-width、横長画面の device-height）とビューポートの寸法の比率を定義します。これは 0.0 から 10.0 までの数値です。

最大ズーム倍率を定義します。これは minimum-scale 以上である必要があります。それより小さい場合、動作は未定義になります。ブラウザーの設定ではこのルールを無視することができ、 iOS10 以降では既定で無視されます。これは 0.0 から 10.0 までの数値です。

最小ズームレベルを定義します。これは maximum-scale 以下でなければなりません。そうしないと、動作が未定義になります。ブラウザーの設定ではこのルールを無視することができ、 iOS10 以降では既定で無視されます。これは 0.0 から 10.0 までの数値です。

論理値で、ユーザーがウェブページをズームできるかどうかを示します。ブラウザーの設定ではこのルールを無視することができ、 iOS10 以降では既定で無視されます。これは yes または no のどちらかを取り、既定では yes です。

警告: user-scalable を no の値に設定してズーム機能を無効にすると、視力の低下したユーザーが、ページコンテンツを読んだり理解したりすることができなくなります。

ウェブページの表示される部分を定義します。キーワード auto、contain、cover のいずれかです。

auto: 最初のレイアウトのビューポートには影響せず、ウェブページ全体が表示されます。
contain: ビューポートは、表示領域内に収まる最大の長方形に合わせて変倍されます。
cover: ビューポートは、端末のディスプレイに収まるように変倍されます。重要なコンテンツがディスプレイの外に表示されないように、safe-area-inset-* 変数を使用することを強くお勧めします。

次の例は、ページを端末の幅で表示することをブラウザーに示します。

html

<meta name="viewport" content="width=device-width" />

次の content 値では、モバイル端末のノッチなどの表示の切り取りを避けるのに役立つ viewport-fit とともに、全画面モードを使用するようにブラウザーに指示する複数のキーワードを使用しています。

html

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

No specification data found for html.elements.meta.name.viewport.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.