<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" />

Specification
CSS Viewport Module Level 1 # viewport-meta

This page was last modified on2025年11月8日 byMDN contributors.