viewport-fit

草案
このページは完成していません。

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

CSS の viewport-fit @viewport 記述子は、文書のビューポートが画面をどのように埋めるかを制御します。

構文

/* キーワード値 */
viewport-fit: auto;
viewport-fit: contain;
viewport-fit: cover;

auto: この値は初期状態のレイアウトビューポートに影響せず、ウェブページ全体が見えます。
contain: ビューポートは、画面内に内接する最も大きな長方形に合うように拡大縮小されます。
cover: ビューポートは、端末の画面の埋め尽くすように拡大縮小されます。これは重要なコンテンツが画面の外に出ないことを保証するために、安全領域差し込み変数を使用するために強く推奨されます。

auto | contain | cover

viewport-fit 記述子を使用するとき、すべての端末の画面が長方形であるとは限らなないので、安全領域差し込み変数を使用してください。

仕様書	状態	備考
CSS Round Display Level 1 "viewport-fit" descriptor の定義	草案	初回定義

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
`viewport-fit` descriptor	Chrome 未対応なし	Edge 未対応なし	Firefox 未対応なし	IE 未対応なし	Opera 未対応なし	Safari 未対応なし	WebView Android 未対応なし	Chrome Android 未対応なし	Firefox Android 未対応なし	Opera Android ?	Safari iOS 未対応なし	Samsung Internet Android 未対応なし