構文
/* キーワード値 */
viewport-fit: auto;
viewport-fit: contain;
viewport-fit: cover;
値
auto- この値は初期状態のレイアウトビューポートに影響せず、ウェブページ全体が見えます。
contain- ビューポートは、画面内に内接する最も大きな長方形に合うように拡大縮小されます。
cover- ビューポートは、端末の画面の埋め尽くすように拡大縮小されます。これは重要なコンテンツが画面の外に出ないことを保証するために、安全領域差し込み変数を使用するために強く推奨されます。
形式文法
auto | contain | cover
この記述子はまだ https://github.com/mdn/data/blob/master/css/at-rules.json に追加されていません。
アクセシビリティの考慮事項
viewport-fit 記述子を使用するとき、すべての端末の画面が長方形であるとは限らなないので、安全領域差し込み変数を使用してください。
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Round Display Level 1 "viewport-fit" descriptor の定義 |
草案 | 初回定義 |
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。