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

BCD tables only load in the browser

Siehe auch