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 Medienmerkmal kann verwendet werden, um die aktuelle Haltung des Geräts zu erkennen, das heißt, ob der Viewport in einem flachen (continuous) oder gefalteten Zustand (folded) ist.

Syntax

Das device-posture Merkmal wird als Schlüsselwortwert aus der unten stehenden Liste angegeben:

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 werden als flach betrachtet und sind daher immer continuous — dies schließt nahtlose gebogene Displays sowie Standard-Desktop-, Laptop-, Tablet- und Mobilbildschirme ein.

folded

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

Beispiele

In diesem Beispiel erkennt das device-posture Medienmerkmal, 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 zwei Panels der Anwendung für ein 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 Device Posture API-Demo auf einem faltbaren Gerät, falls möglich. Aktuelle Browsing-Entwicklertools ermöglichen das Emulieren von faltbaren Geräten, schließen jedoch die Emulation von teilweise gefalteten Geräten nicht ein — nur vollständig geöffnete oder geschlossene Geräte — daher werden sie immer continuous zurückgeben.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch