@viewport

非推奨

この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

注: https://github.com/w3c/csswg-drafts/issues/4766 に @viewport を標準路線から除外することに関する議論があります。

@viewport は CSS のアット規則で、文書を通して表示するためのビューポートを構成することができます。第一にモバイル端末のために使用されますが、 (Microsoft Edge などの) "snap to edge" のような機能に対応するデスクトップブラウザーでも使用されます。

パーセント値で指定された長さは、初期ビューポートからの相対で計算されます。これはユーザーエージェントや記述されたスタイルがビューポートを調整する機会を持つ前のビューポートです。これはふつう、デスクトップブラウザーのウィンドウの寸法に基づくもので、全画面モードのものではありません。

モバイル端末 (または全画面モードのデスクトップ端末) では、初期ビューポートはふつう端末の画面のうちアプリケーションが利用できる部分です。これは全画面の場合もあれば、全画面からオペレーティングシステムが制御する領域 (タスクバーなど) を引いた部分の場合、アプリケーションが利用できる画面領域 (全画面又は画面からオペレーティングシステムやその他のアプリケーションが所有する領域を引いた部分) の場合もあります。

@viewport {
  width: 100vw; /*実際のビューポートの幅を端末の幅に設定*/
}

メモ: <meta name="viewport"> タグを使用すると、 @viewport より優先します。

構文

このアット規則は波括弧で囲まれた CSS ブロック内に、一連の入れ子になった記述子を含みます。

1.0 または 100% のズーム倍率はズーム無しに相当します。より大きい値はズームイン、より小さい値はズームアウトになります。

記述子

現時点では @viewport のブラウザーの互換性は弱く、対応は Internet Explorer 及び Edge で広く行われています。これらのブラウザーでも、少数の記述子しか利用できません。 @viewport は対応していないブラウザーからは無視され、理解できない記述子は無視されるでしょう。

min-width (en-US): 文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。
max-width (en-US): 文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。
width (en-US): min-width と max-width の両方を設定するための一括指定です。
min-height (en-US): 文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。
max-height: 文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。
height: min-height と max-height の両方を設定するための一括指定です。
zoom: ズームの初期値を設定します。
min-zoom: ズームの最小値を設定します。
max-zoom: ズームの最大値を設定します。
user-zoom: ユーザーがズーム倍率を変更できるか否かを制御します。
orientation: 文書の向きを制御します。
viewport-fit: 長方形ではないディスプレイでの文書の表示を制御します。

形式文法

@viewport {
  <group-rule-body>
}

例

ビューポートの大きさ、拡大率、向きの設定

@viewport {
  min-width: 640px;
  max-width: 800px;
}

@viewport {
  zoom: 0.75;
  min-zoom: 0.5;
  max-zoom: 0.9;
}

@viewport {
  orientation: landscape;
}

仕様書

仕様書	状態	備考
CSS Round Display Level 1 @viewport の定義	草案	`viewport-fit` 記述子を定義。
CSS Device Adaptation @viewport の定義	草案	初回定義

ブラウザーの互換性

BCD tables only load in the browser