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

Syntax

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

continuous: Zeigt 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 angesehen und sind daher immer continuous — dies schließt nahtlose gekrümmte Displays sowie Standard-Desktop-, Laptop-, Tablet- und Mobilbildschirme ein.
folded: Zeigt 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 die device-posture-Medieneigenschaft, 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 ein leichteres 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, wenn möglich. Aktuelle Entwicklerwerkzeuge für Browser ermöglichen das Emulieren faltbarer Geräte, schließen jedoch die Emulation teilweise gefalteter Geräte aus — nur vollständig offene oder geschlossene Geräte — sodass sie immer continuous zurückgeben.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden