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.

Die device-posture CSS-Media-Eigenschaft kann verwendet werden, um die aktuelle Haltung eines Geräts zu erkennen, also ob der Viewport in einem flachen (continuous) oder gefalteten Zustand (folded) ist.

Syntax

Die device-posture-Eigenschaft wird als Schlüsselwortwert angegeben, der aus der folgenden Liste ausgewählt wird:

continuous

Gibt einen flachen Bildschirmzustand an. Faltbare Geräte sind continuous, solange sie flach sind; entweder vollständig geöffnet oder vollständig geschlossen. Nicht faltbare Geräte gelten als flach und sind daher immer continuous. Dies schließt nahtlos gekrümmte Displays sowie standardmäßige Desktop-, Laptop-, Tablet- und Mobilbildschirme ein.

folded

Gibt einen gefalteten Bildschirmzustand an. Faltbare Geräte sind folded, wenn sie in einer Buch- oder Laptop-Haltung verwendet werden.

Beispiele

In diesem Beispiel erkennt die device-posture-Media-Eigenschaft, wenn ein Gerät in einer gefalteten Haltung ist, und fügt basierend auf seiner orientation einen Rand hinzu, um eine größere Trennlinie zwischen den zwei Panels der Anwendung für einfacheres Lesen zu schaffen.

css
@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 Demo zur Device Posture API auf einem faltbaren Gerät, wenn möglich. Aktuelle Entwicklerwerkzeuge von Browsern ermöglichen die Emulation von faltbaren Geräten, schließen jedoch die Emulation teilweise gefalteter Geräte aus — es werden nur vollständig offene oder geschlossene Geräte emuliert — daher wird immer continuous zurückgegeben.

Spezifikationen

Specification
Device Posture API
# the-device-posture-media-feature

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
device-posture media feature
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.

Siehe auch