<meta name="viewport">

使用上のメモ

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

content

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

width

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

height

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

initial-scale

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

maximum-scale

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

minimum-scale

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

user-scalable

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

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

• MDN WCAG を理解する、ガイドライン 1.4 の説明
• Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0

viewport-fit

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

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

例

meta viewport サイズの使用

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

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

メディアクエリーによる viewport メタの使用

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

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

仕様書

ブラウザーの互換性

関連情報

• 用語集のビューポート