Signatur
Beschreibung
Die Schnittstelle DevicePosture gehört zur Device Posture API. Sie beschreibt, wie ein faltbares Gerät (z. B. ein Foldable-Smartphone oder ein Laptop mit zwei Bildschirmen) gerade gehalten wird. Du erzeugst sie nicht selbst: Der Browser stellt genau eine Instanz über navigator.devicePosture bereit.
Die schreibgeschützte Eigenschaft type hat einen von zwei Werten:
"continuous"– die Ansicht ist flach und durchgehend. Das gilt für normale Geräte ohne Faltung, für vollständig aufgeklappte Foldables und für Geräte, deren Bildschirme nahtlos wirken."folded"– das Gerät ist teilweise gefaltet, etwa wie ein Buch oder wie ein Laptop (Tabletop-Modus).
Ändert sich die Haltung, löst das Objekt ein change-Event aus. Du kannst es mit addEventListener("change", …) oder über die Eigenschaft onchange abfangen. So kannst du dein Layout anpassen, zum Beispiel ein Video in der oberen Hälfte und die Steuerung in der unteren Hälfte anzeigen, sobald das Gerät gefaltet ist.
Für reine Layout-Anpassungen reicht oft das CSS-Media-Feature @media (device-posture: folded). Die JavaScript-Schnittstelle brauchst du dann, wenn sich auch das Verhalten ändern soll, etwa ein anderes Steuerungskonzept, Analyse-Daten oder das Nachladen von Komponenten.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $type | "continuous" | "folded" | "continuous" | Schreibgeschützte Eigenschaft mit der aktuellen Haltung des Geräts. |
| $onchange | ((event: Event) => void) | null | null | Event-Handler-Eigenschaft für das change-Event. Wird aufgerufen, wenn sich type ändert. |
Rückgabewert
navigator.devicePosture. Wird die API nicht unterstützt, ist die Eigenschaft undefined.Beispiele
Unterstützung prüfen und aktuelle Haltung auslesen
if ('devicePosture' in navigator) {
const posture = navigator.devicePosture;
console.log(`Aktuelle Haltung: ${posture.type}`);
} else {
console.log('Device Posture API wird nicht unterstützt');
}Auf Haltungsänderungen mit addEventListener reagieren
const posture = navigator.devicePosture;
const updateLayout = () => {
const folded = posture.type === 'folded';
document.body.classList.toggle('layout-gefaltet', folded);
console.log(folded ? 'Gerät gefaltet – geteiltes Layout' : 'Gerät flach – normales Layout');
};
posture.addEventListener('change', updateLayout);
updateLayout(); // Startzustand sofort anwenden
// Später, z. B. beim Verlassen der Ansicht:
// posture.removeEventListener('change', updateLayout);Video-Player: Steuerung im Tabletop-Modus auslagern (onchange)
const player = document.querySelector('#player');
const controls = document.querySelector('#steuerung');
const applyPosture = () => {
if (navigator.devicePosture.type === 'folded') {
// Video oben, Steuerung auf der unteren Hälfte
controls.classList.add('untere-haelfte');
player.classList.add('obere-haelfte');
} else {
controls.classList.remove('untere-haelfte');
player.classList.remove('obere-haelfte');
}
};
if (navigator.devicePosture) {
navigator.devicePosture.onchange = applyPosture;
applyPosture();
}Kombination mit dem CSS-Media-Feature per matchMedia
const mq = window.matchMedia('(device-posture: folded)');
console.log('Gefaltet laut CSS:', mq.matches);
console.log('Gefaltet laut JS:', navigator.devicePosture?.type === 'folded');
mq.addEventListener('change', (e) => {
console.log('Media Query geändert, gefaltet:', e.matches);
});// Wichtig · Fallstricke
Experimentelle API: Aktuell wird sie nur in Chromium-basierten Browsern ab Version 132 unterstützt, und auch dort vor allem auf Android-Foldables. Firefox und Safari unterstützen sie nicht. Prüfe deshalb immer zuerst mit 'devicePosture' in navigator und sieh eine Ersatzlösung vor.
- Auf Geräten ohne Faltung ist
typeimmer"continuous". Dieser Wert sagt also nicht, dass es sich um ein faltbares Gerät handelt. - Die API sagt nichts über die Lage des Falzes (horizontal oder vertikal) oder über seine Position. Dafür kombinierst du sie mit Media Queries wie
orientationoder mit der Viewport Segments API (viewport-segments,env(viewport-segment-*)). - Das
change-Event wird beim Laden nicht ausgelöst. Wende den Startzustand selbst an, wie in den Beispielen oben. - Für reine Darstellungsänderungen ist
@media (device-posture: folded)meist einfacher und schneller als JavaScript. - In den Chrome DevTools kannst du die Haltung im Gerätemodus simulieren. Das ist nützlich, wenn du kein faltbares Testgerät hast.