このページにスクリプトエラーがあります。サイト編集者によって解決されるまでの間は、以下の部分的な内容のみが表示可能です。
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 の定義 |
草案 | 初回定義 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
viewport-fit descriptor | Chrome ? | Edge ? | Firefox 未対応 なし | IE 未対応 なし | Opera ? | Safari 未対応 なし | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android 未対応 なし | Opera Android ? | Safari iOS 未対応 なし | Samsung Internet Android ? |
凡例
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。