このページにスクリプトエラーがあります。サイト編集者によって解決されるまでの間は、以下の部分的な内容のみが表示可能です。

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

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

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

構文

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

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

形式文法

{{csssyntax}}

アクセシビリティの考慮事項

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

仕様書

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応
実験的
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari 完全対応 11WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS 完全対応 11Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09
最終更新者: mdnwebdocs-bot,