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 の定義
草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
viewport-fit descriptorChrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

未対応  
未対応

関連情報