device-posture
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Das device-posture CSS Media-Feature kann verwendet werden, um die aktuelle Haltung des Geräts zu erkennen, also ob das Viewport in einem flachen (continuous) oder gefalteten Zustand (folded) ist.
Syntax
Das device-posture-Feature wird als ein Schlüsselwortwert angegeben, der aus der folgenden Liste gewählt wird:
continuous-
Gibt einen flachen Bildschirmzustand an. Faltbare Geräte sind
continuous, während sie flach sind; entweder vollständig geöffnet oder vollständig geschlossen. Nicht faltbare Geräte werden als flach betrachtet und sind daher immercontinuous— dies schließt nahtlose gebogene Displays und standardmäßige Desktop-, Laptop-, Tablet- und Mobilbildschirme ein. folded-
Gibt einen gefalteten Bildschirmzustand an. Faltbare Geräte sind
folded, während sie in einer Buch- oder Laptop-Haltung verwendet werden.
Beispiele
In diesem Beispiel erkennt das device-posture Media-Feature, wenn sich ein Gerät in einer gefalteten Haltung befindet, und fügt basierend auf seiner orientation einen Rand hinzu, um einen größeren Abstand zwischen den beiden Panels der Anwendung für einfacheres Lesen zu schaffen.
@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;
}
}
Um den obigen Code in Aktion zu sehen, betrachten Sie die Device Posture API-Demo auf einem faltbaren Gerät, wenn möglich. Aktuelle Entwickler-Tools für Browser ermöglichen die Emulation faltbarer Geräte, umfassen jedoch nicht die Emulation von teilweise gefalteten Geräten — nur vollständig offene oder geschlossene Geräte — daher werden sie immer continuous zurückgeben.
Spezifikationen
| Specification |
|---|
| Device Posture API # the-device-posture-media-feature |