DevicePosture.type — Eigenschaft · JavaScript-Referenz

Signatur

DevicePosture.type

Beschreibung

Die Eigenschaft type der Schnittstelle DevicePosture gehört zur Device Posture API. Sie gibt an, in welcher physischen Haltung sich ein Gerät gerade befindet. Das ist vor allem bei faltbaren Geräten wichtig, etwa bei Foldables oder Dual-Screen-Geräten. Die Instanz erhalten Sie über navigator.devicePosture.

Es gibt zwei mögliche Werte:

"continuous": Die Anzeige ist flach. Das gilt für herkömmliche Geräte ohne Faltmechanismus, für vollständig aufgeklappte Foldables und für Geräte, die sich ganz nach hinten umklappen lassen. So verhalten sich auch alle Geräte, die keine Haltung melden.
"folded": Das Gerät ist teilweise gefaltet, zum Beispiel wie ein Buch oder wie ein Laptop mit angewinkeltem Bildschirm.

Mit type können Sie Layouts an die Faltung anpassen. Sie können Inhalte zum Beispiel auf zwei Hälften aufteilen oder Steuerelemente von der Faltkante weg verschieben. Wenn sich die Haltung ändert, löst navigator.devicePosture das Ereignis change aus. Lesen Sie dort den neuen Wert von type. Für reine Darstellungsfragen gibt es in CSS das gleichwertige Media Feature @media (device-posture: folded).

Rückgabewert

Typ

"continuous" | "folded"

Beschreibung

Eine Zeichenkette mit der aktuellen Haltung des Geräts. Der Wert ist schreibgeschützt. Zuweisungen werden ignoriert, im Strict Mode lösen sie einen TypeError aus.

Beispiele

Aktuelle Haltung auslesen (mit Feature-Erkennung)

if ('devicePosture' in navigator) {
  const posture = navigator.devicePosture.type;
  console.log(`Aktuelle Haltung: ${posture}`);
} else {
  console.log('Device Posture API wird nicht unterstützt.');
}

Aktuelle Haltung: continuous

Layout bei Haltungswechsel anpassen (addEventListener)

const applyPosture = () => {
  const { type } = navigator.devicePosture;
  // Setzt eine CSS-Klasse, damit das Stylesheet zwei Spalten anzeigen kann
  document.body.classList.toggle('layout-split', type === 'folded');
  console.log(`Layout angepasst für: ${type}`);
};

if ('devicePosture' in navigator) {
  applyPosture(); // Ausgangszustand setzen
  navigator.devicePosture.addEventListener('change', applyPosture);
}

Layout angepasst für: continuous Layout angepasst für: folded // nach dem Anwinkeln des Geräts

Einmalig reagieren über die onchange-Eigenschaft

const posture = navigator.devicePosture;

if (posture) {
  posture.onchange = () => {
    if (posture.type === 'folded') {
      console.log('Gerät gefaltet – Videosteuerung in die untere Hälfte verschieben.');
      posture.onchange = null; // Handler wieder entfernen
    }
  };
}

Gerät gefaltet – Videosteuerung in die untere Hälfte verschieben.

JavaScript und CSS-Media-Query abgleichen

const mq = window.matchMedia('(device-posture: folded)');

const report = () => {
  const jsValue = navigator.devicePosture?.type ?? 'nicht verfügbar';
  console.log(`JS: ${jsValue}, CSS folded: ${mq.matches}`);
};

report();
mq.addEventListener('change', report);

JS: continuous, CSS folded: false

// Wichtig · Fallstricke

Experimentell: Die Device Posture API gibt es derzeit nur in Chromium-basierten Browsern (ab Version 132). Firefox und Safari unterstützen sie nicht. Prüfen Sie deshalb immer zuerst mit 'devicePosture' in navigator, ob die API vorhanden ist.
Auf Geräten, die nicht faltbar sind, ist der Wert immer "continuous". Aus "continuous" können Sie also nicht schließen, dass das Gerät ein Foldable ist.
Der Wert sagt nichts darüber aus, wo die Faltkante liegt oder wie sie ausgerichtet ist. Dafür brauchen Sie ergänzend die Viewport Segments API (window.viewport.segments) oder die CSS-Media-Features horizontal-viewport-segments und vertical-viewport-segments.
Es gibt keinen Wert für ein vollständig zugeklapptes Gerät. In diesem Zustand ist die Seite in der Regel nicht sichtbar.
Zum Testen am Desktop können Sie in den Chrome-DevTools im Gerätemodus die Haltung simulieren (Einstellung „Device posture“).
Hängen Sie an das change-Ereignis keine aufwendigen Neuberechnungen. Beim Auf- und Zuklappen kann es mehrmals kurz hintereinander ausgelöst werden.

Siehe auch

CSSRule.type PermissionStatus.name DataCue.type Event.type MIDIPort.type