Navigator.devicePosture — Eigenschaft · JavaScript-Referenz

Signatur

get Navigator.devicePosture

Beschreibung

Die schreibgeschützte Eigenschaft navigator.devicePosture gehört zur Device Posture API und liefert ein DevicePosture-Objekt. Über dessen Eigenschaft type erfährst du, ob das Gerät gerade flach bzw. durchgehend ("continuous") oder gefaltet ("folded") ist. Die Eigenschaft ist vor allem für faltbare Smartphones und Tablets gedacht, etwa das Samsung Galaxy Z Fold oder das Microsoft Surface Duo.

Brauchbar ist das für Layouts, die sich an die Haltung des Geräts anpassen sollen: Ein Video-Player kann zum Beispiel im halb aufgeklappten „Laptop-Modus“ das Video oben und die Steuerelemente unten anzeigen, und ein E-Book-Reader kann im gefalteten Zustand zwei Seiten nebeneinander darstellen. Das DevicePosture-Objekt erbt von EventTarget und löst bei jeder Haltungsänderung ein change-Ereignis aus. Du kannst also addEventListener("change", …) oder die Eigenschaft onchange verwenden.

Wenn es nur um das Styling geht, reicht meistens die CSS-Media-Query @media (device-posture: folded). Die JavaScript-Schnittstelle brauchst du, wenn sich die Logik ändern muss, also etwa andere Komponenten gerendert, Messwerte erfasst oder Canvas-Inhalte neu berechnet werden sollen. Geräte ohne Faltmechanismus melden immer "continuous".

Rückgabewert

Typ

DevicePosture

Beschreibung

Ein DevicePosture-Objekt (erbt von EventTarget) mit der Eigenschaft type ("continuous" | "folded") und dem Ereignis change. In Browsern ohne Unterstützung ist die Eigenschaft undefined.

Beispiele

Aktuelle Haltung abfragen (mit Feature-Erkennung)

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

Aktuelle Haltung: continuous

Auf Haltungsänderungen reagieren mit addEventListener

const posture = navigator.devicePosture;

const applyLayout = () => {
  const folded = posture.type === 'folded';
  document.body.classList.toggle('layout-split', folded);
  console.log(folded ? 'Zweispaltiges Layout aktiv' : 'Einspaltiges Layout aktiv');
};

if (posture) {
  applyLayout();
  posture.addEventListener('change', applyLayout);

  // Später, z. B. beim Verlassen der Ansicht, wieder entfernen:
  // posture.removeEventListener('change', applyLayout);
}

Einspaltiges Layout aktiv // nach dem Falten des Geräts: Zweispaltiges Layout aktiv

Kurzform über die onchange-Eigenschaft

if (navigator.devicePosture) {
  navigator.devicePosture.onchange = (event) => {
    // event.target ist das DevicePosture-Objekt
    console.log(`Neue Haltung: ${event.target.type}`);
  };
}

Neue Haltung: folded

Fallback über die CSS-Media-Query in JavaScript

const getPosture = () => {
  if (navigator.devicePosture) return navigator.devicePosture.type;
  // Fallback: CSS-Media-Query prüfen (falls nur diese unterstützt wird)
  return matchMedia('(device-posture: folded)').matches ? 'folded' : 'continuous';
};

console.log(getPosture());

continuous

// Wichtig · Fallstricke

Experimentell: Die Device Posture API ist ein Entwurf des W3C (Candidate Recommendation Draft) und wird bisher nur von Chromium-basierten Browsern unterstützt (Chrome/Edge ab etwa Version 132). Firefox und Safari bieten sie nicht an. Prüfe deshalb immer mit 'devicePosture' in navigator, ob die API vorhanden ist.
Sicherer Kontext: Die API steht nur über HTTPS oder localhost zur Verfügung.
Die Werte "continuous" und "folded" sagen nichts über den Faltwinkel oder die Lage des Scharniers aus. Die Position des Falzes liefert die Viewport Segments API (window.viewport.segments, CSS env(viewport-segment-*)).
Geräte ohne Faltmechanismus liefern immer "continuous". Aus diesem Wert allein kannst du also nicht schließen, dass das Gerät faltbar ist.
Ältere Entwürfe der Spezifikation kannten weitere Werte wie "laptop", "book" oder "flat". Diese wurden gestrichen und sollten nicht mehr verwendet werden.
In den Chrome DevTools kannst du die Haltung im Geräte-Emulationsmodus bei faltbaren Geräten simulieren.

Siehe auch

Navigator NavigationDestination.index Navigator.deviceMemory Navigator.serviceWorker Navigator.bluetooth