device-posture
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
device-posture は CSS のメディア特性で、端末の現在の状態、つまり、ビューポートが平ら (continuous) 状態か、折り曲げられた (folded) 状態かを検出することができます。
構文
device-posture 特性は、以下のリストから選択したキーワード値として指定します。
continuous-
画面が平らな状態を示します。折り曲げ式の端末は、完全に開いているか完全に閉じられているか、平らな状態である間は
continuousです。折り曲げ式ではない端末は平らとみなされるため、常にcontinuousです。これには、シームレスな曲面ディスプレイ、標準的なデスクトップ、ノートパソコン、タブレット、モバイル端末の画面が含まれます。 folded-
折り曲げられた画面の状態を示します。折り曲げ可能な端末は、本やノートパソコンのように使用しているときは
foldedの状態です。
例
この例では、 device-posture メディア特性により、端末が折られた状態にあることを検出すると、その向き (orientation) に応じてマージンが追加され、アプリケーションの 2 つのパネル間の余白が広くなり、読みやすくなります。
@media (device-posture: folded) and (orientation: landscape) {
.list-view {
margin-inline-end: 60px;
}
}
@media (device-posture: folded) and (orientation: portrait) {
.list-view {
margin-block-end: 60px;
}
}
上記のコードの動作を確認するには、可能であれば、折りたたみ式端末で Device Posture API のデモをご覧ください。現在のブラウザー開発者ツールでは、折りたたみ式端末のエミュレーションは可能ですが、部分的に折りたたまれた端末のエミュレーションは記載されていません。完全に開かれた、または閉じられた端末のみエミュレーションできるため、常に continuous が返されます。
仕様書
| Specification |
|---|
| Device Posture API # the-device-posture-media-feature |