DevicePosture: change — Ereignis · JavaScript-Referenz

Signatur

navigator.devicePosture.addEventListener("change", handler)

Beschreibung

Das change-Ereignis gehört zum Interface DevicePosture, das über navigator.devicePosture erreichbar ist. Es wird ausgelöst, sobald sich die physische Haltung des Geräts ändert. Bei faltbaren Smartphones und Tablets ist das zum Beispiel der Fall, wenn das Gerät auf- oder zugeklappt wird. Die aktuelle Haltung steht danach in der Eigenschaft navigator.devicePosture.type.

Die Spezifikation kennt derzeit zwei Werte: "continuous" für eine flache, durchgehende Anzeigefläche (auch normale Smartphones, Laptops und Tablets) und "folded" für ein teilweise gefaltetes Gerät, etwa im „Buch“- oder „Laptop“-Modus. Mit dem Ereignis kannst du Layouts dynamisch anpassen, zum Beispiel Inhalte auf zwei Hälften verteilen oder Bedienelemente von der Falz wegrücken.

Den Handler registrierst du entweder mit addEventListener("change", handler) oder über die Eigenschaft navigator.devicePosture.onchange. Der Handler erhält ein einfaches Event-Objekt ohne zusätzliche Daten. Die neue Haltung liest du über event.target.type bzw. navigator.devicePosture.type aus. Für reine Stilanpassungen reicht oft die CSS-Media-Query @media (device-posture: folded). JavaScript brauchst du vor allem für Logik, die sich nicht mit CSS abbilden lässt.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Name des Ereignisses, hier immer `"change"`.
$handler Pflicht	(event: Event) => void		Callback, der bei jeder Änderung der Haltung aufgerufen wird. `event.target` ist das `DevicePosture`-Objekt.
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Optionen wie `once` oder `signal` (zum Abmelden per `AbortController`).

Beispiele

Haltungswechsel mit addEventListener überwachen

if ('devicePosture' in navigator) {
  const posture = navigator.devicePosture;
  console.log(`Start-Haltung: ${posture.type}`);

  posture.addEventListener('change', (event) => {
    console.log(`Neue Haltung: ${event.target.type}`);
  });
} else {
  console.log('Device Posture API wird nicht unterstützt');
}

Start-Haltung: continuous Neue Haltung: folded

Layout per CSS-Klasse umschalten (onchange-Eigenschaft)

const applyPosture = () => {
  const type = navigator.devicePosture.type;
  document.body.classList.toggle('layout-folded', type === 'folded');
  document.body.classList.toggle('layout-flat', type === 'continuous');
};

if ('devicePosture' in navigator) {
  applyPosture(); // initialen Zustand setzen
  navigator.devicePosture.onchange = applyPosture;
}

Listener mit AbortController wieder entfernen

const controller = new AbortController();

const onPostureChange = () => {
  const isFolded = navigator.devicePosture.type === 'folded';
  const video = document.querySelector('video');
  // Im gefalteten Modus Video auf die obere Hälfte beschränken
  video?.classList.toggle('top-half', isFolded);
};

navigator.devicePosture?.addEventListener('change', onPostureChange, {
  signal: controller.signal
});

// Später, z. B. beim Verlassen der Ansicht:
controller.abort();
// Alternativ:
// navigator.devicePosture.removeEventListener('change', onPostureChange);

// Wichtig · Fallstricke

Experimentell: Die Device Posture API wird derzeit nur von Chromium-Browsern (Chrome/Edge ab Version 132) unterstützt. Firefox und Safari kennen sie nicht. Prüfe die Unterstützung daher immer mit 'devicePosture' in navigator.
Das Ereignis wird nicht beim Laden der Seite ausgelöst. Den Anfangszustand musst du selbst einmal über navigator.devicePosture.type auslesen.
Auf nicht faltbaren Geräten ist der Wert dauerhaft "continuous", dort wird change praktisch nie ausgelöst.
Das Event-Objekt enthält keine eigenen Daten wie event.posture. Lies den Wert immer über type aus.
Für reine Darstellungsfragen ist die Media-Query device-posture oft einfacher und schneller. Du kannst sie auch per matchMedia('(device-posture: folded)') in JavaScript beobachten.
Zum Testen ohne echtes faltbares Gerät kannst du in den Chrome-DevTools (Sensors bzw. Geräteemulation) eine Haltung simulieren.
Die API steht nur in sicheren Kontexten (HTTPS) zur Verfügung.

Siehe auch

CookieStore: change IdleDetector: change PermissionStatus: change Element: gesturechange EventSource: message