`device-posture` CSS-Media-Feature

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

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-Feature kann verwendet werden, um die aktuelle Haltung eines Geräts zu erkennen, d.h. ob das Viewport in einem flachen (continuous) oder gefalteten Zustand (folded) ist.

Syntax

Die device-posture-Funktion wird als Schlüsselwortwert aus der folgenden 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 gelten als flach und sind daher immer continuous — dies schließt nahtlos gewölbte Displays sowie Standard-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-Feature, wenn ein Gerät in einer gefalteten Haltung ist, und fügt basierend auf seiner orientation einen Rand hinzu, um eine größere Lücke zwischen den beiden Anwendungsbereichen 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, wenn möglich. Die aktuellen Browser-Entwicklertools ermöglichen die Emulation faltbarer Geräte, beinhalten jedoch keine Emulation von teilweise gefalteten Geräten — nur vollständig geöffnete oder geschlossene Geräte — daher wird immer continuous zurückgegeben.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

device-posture CSS-Media-Feature