<meta name="viewport">

使用上のメモ

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

content

content 属性は定義する必要があり、その値はビューポート関連のさまざまな動作を設定します。 値は、key=value の形式で指定された 1 つ以上のキーと値の組をカンマ区切りで列挙したリストです。次のキーが定義されています。

width

ビューポートの幅の（最小）ピクセル数を制御します（ビューポートの幅と画面の幅を参照）。1 から 10000 までの正の値のピクセル数（width=600 など）または特別な値 device-width（端末画面の物理サイズを CSS ピクセル数で表したもの）に設定できます。この値は vw の単位の値を決定します。

height

ビューポートの高さの（最小）ピクセル数を制御します（ビューポートの幅と画面の幅を参照）。1 から 10000 までの正の値のピクセル数（height=400 など）または特別な値 device-height（端末画面の物理サイズを CSS ピクセル数で表したもの）に設定できます。この値は vh 単位の値を決定します。

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 に設定してズーム機能を無効にすると、弱視のユーザーがページコンテンツを読み取り理解することができなくなります。さらに、WCAG では少なくとも 2 倍の拡大率が要求されていますが、最善の取り組みとしては 5 倍のズームを有効にすることができることが推奨されます。情報は以下を参照してください。

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

interactive-widget

仮想キーボードなどの対話型 UI ウィジェットがページのビューポートに及ぼす効果を指定します。 キーワード値 resizes-visual、resizes-content、overlays-content のいずれかを指定することができます。

• resizes-visual: 視覚ビューポートのサイズが対話型ウィジェットによって変更されます。これがデフォルト値です。
• resizes-content: ビューポートのサイズが対話型ウィジェットによって変更されます。
• overlays-content: ビューポートも視覚ビューポートも、対話型ウィジェットによってサイズが変更されません。

ビューポートのサイズが変更されると、初期包含ブロックのサイズも変更され、したがってビューポート単位の計算値にも影響を与えます。

viewport-fit

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

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

ビューポートの幅と画面の幅

ブラウザーのビューポートは、ウェブコンテンツを見ることができるウィンドウの領域です。ビューポートのサイズは、ページのコンテンツをレイアウトする前に計算する必要があります。ページがビューポートからはみ出す場合、ブラウザーはユーザーがスクロールしてすべてのコンテンツにアクセスできるようにスクロールバーを提供しますが、ビューポートのサイズは、コンテンツが収まるべき空間（特に水平方向）の目安となります。

一部のモバイル端末やその他の狭い画面では、画面よりも広い仮想ウィンドウまたはビューポートでページをレンダリングし、レンダリング結果を縮小して、すべてを一度に見ることができるようにするものがあります。ユーザーは、ページのさまざまな部分を、ズームやパンを行うことでより詳しく見ていくことができます。例えば、モバイル画面の幅が 640px の場合、ページは 980px の仮想ビューポートでレンダリングされ、 640px の空間に収まるように縮小されるかもしれません。これは、すべてのページがモバイル用に最適化されているわけではなく、小さなビューポート幅でレンダリングすると壊れてしまう（あるいは少なくとも見た目が悪くなる）ために行われます。この仮想ビューポートは、モバイル端末に最適化されていないサイト全般を、画面が狭い端末でも見やすくするための方法です。しかし、この仕組みは、メディアクエリーを使用して狭い画面に最適化されているページにはあまり向いていません。例えば、仮想ビューポートが 980px の場合、640px や 480px 以下で起動するメディアクエリーは絶対に使用せず、こうしたレスポンシブデザイン手法の有効性を制限してしまうのです。ビューポートの <meta> 要素は、このような画面の内側が狭い端末における仮想ビューポートの問題を緩和するものです。

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

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

サイトでは、ビューポートを特定のサイズに設定することができます。例えば、"width=320, initial-scale=1" という定義は、縦長モードの小さな携帯電話の画面に正確にフィットするように使用することができます。これは、ブラウザーがより大きなサイズでページを表示しない場合に問題が発生する可能性があります。これを修正するために、ブラウザーは要求された縮尺で画面を埋めるために必要であればビューポートの幅を拡大させます。これは、特に大画面の端末で使用する場合に有用です。

初期または最大の縮尺を設定したページでは、 width プロパティが実際には最小のビューポート幅に対応することを意味しています。例えば、レイアウトに少なくとも 500 ピクセルの幅が必要な場合、以下のようなマークアップを使用することができます。画面幅が 500 ピクセル以上ある場合、ブラウザーは画面に合わせるために（ズームインするのではなく）ビューポートを拡大します。

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

画面の密度

画面解像度が上がり、人間の目では個々のピクセルが識別できないサイズになりました。例えば、スマートフォンの画面は、小さな画面でも 1920 〜 1080 ピクセル（〜 400dpi）以上の解像度を持っている場合がほとんどです。このため、多くのブラウザーは、 CSS 「ピクセル 」 1 つに対して複数のハードウェアピクセルを対応させることで、より小さな物理サイズでページを表示することができます。当初は、タッチ操作に最適化された多くのウェブサイトで、ユーザビリティと読み取り可能なサイズの問題が発生しました。

高 dpi の画面においては、initial-scale=1 を指定したページは、ブラウザーに効果的に拡大表示されることになります。テキストは滑らかで鮮明に表示されますが、ビットマップ画像は画面の内側まで解像度を生かしきれないかもしれません。こうした画面においては、より鮮明な画像を実現するために、ウェブ開発者は画像やレイアウト全体を最終的なサイズよりも高い倍率で設計し、 CSS やビューポートプロパティを使用して縮小することが求められるかもしれません。

デフォルトのピクセル比は、画面の密度に依存します。密度が 200dpi 未満の画面では、比率は 1.0 です。密度が 200 〜 300dpi の画面では、比率は 1.5 です。 300dpi 以上の画面の場合、比率は整数の floor (density/150dpi) となります。デフォルトの比率は、ビューポートの縮小率が 1 に等しい場合にのみ適用されることに注意してください。それ以外の場合は、 CSS ピクセルとデバイスピクセルの関係は、現在のズームレベルに依存します。

例

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

対話型の UI ウィジェットの影響

ブラウザーの対話型の UI ウィジェットは、ページのビューポートサイズに影響を与える可能性があります。最も一般的な例が仮想キーボードです。ブラウザーが使用するリサイズ動作を制御するには、interactive-widget プロパティを設定します。

デフォルトで、仮想キーボードは視覚的ビューポートのサイズのみを変化させ、ページのレイアウトには影響しません。interactive-widget プロパティを resizes-content に設定することで、仮想キーボードの存在に応じてページのレイアウトを適応させることができます。

<meta name="viewport" content="interactive-widget=resizes-content" />

仕様書

ブラウザーの互換性

関連情報

• 用語集のビューポート
• Prepare for viewport resize behavior changes coming to Chrome on Android - developer.chrome.com
• Mobile viewports for responsive experiences - Adobe Experience League