Signatur
Beschreibung
Die Eigenschaft absolute des DeviceOrientationEvent-Interfaces zeigt an, auf welches Bezugssystem sich die Winkel alpha, beta und gamma beziehen. Bei true beziehen sie sich auf das Erdkoordinatensystem: alpha ist dann relativ zum magnetischen Nordpol, die anderen Achsen zur Schwerkraft. Bei false beziehen sich die Werte auf einen beliebigen, vom Gerät gewählten Ausgangszustand, oft die Ausrichtung beim Start der Messung.
Wichtig ist das vor allem für Kompass-Anwendungen, Karten mit „Blickrichtung“, Augmented Reality und Sternkarten. Dort braucht man eine echte Himmelsrichtung. Für Spiele oder Neigungssteuerung reichen relative Daten meistens aus, weil dort nur Änderungen zählen.
Browser können zwei Ereignisse auslösen: deviceorientation (in Chromium relativ, also absolute === false) und deviceorientationabsolute (immer absolut, sofern ein Magnetometer vorhanden ist). Frag deshalb vor jeder Kompass-Berechnung event.absolute ab, statt dich auf den Ereignistyp zu verlassen.
Beispiele
Absolut oder relativ? Einfache Prüfung
window.addEventListener('deviceorientation', (event) => {
const modus = event.absolute ? 'absolut (Erdbezug)' : 'relativ (Gerätebezug)';
console.log(`Orientierung ${modus}: alpha=${event.alpha?.toFixed(1)}°`);
}, { once: true });Kompass mit Fallback auf deviceorientationabsolute und iOS
const nadel = document.querySelector('#nadel');
const aktualisiereKompass = (event) => {
let richtung = null;
if (typeof event.webkitCompassHeading === 'number') {
// iOS Safari: eigene Kompass-Eigenschaft, bereits im Uhrzeigersinn
richtung = event.webkitCompassHeading;
} else if (event.absolute && event.alpha !== null) {
// alpha läuft gegen den Uhrzeigersinn -> umrechnen
richtung = (360 - event.alpha) % 360;
}
if (richtung === null) return; // relative Daten taugen nicht als Kompass
nadel.style.transform = `rotate(${-richtung}deg)`;
};
const ereignis = 'ondeviceorientationabsolute' in window
? 'deviceorientationabsolute'
: 'deviceorientation';
window.addEventListener(ereignis, aktualisiereKompass);Berechtigung auf iOS anfordern und absolute-Status melden
const starte = async () => {
if (typeof DeviceOrientationEvent.requestPermission === 'function') {
const status = await DeviceOrientationEvent.requestPermission();
if (status !== 'granted') {
console.warn('Zugriff auf Sensoren verweigert');
return;
}
}
window.addEventListener('deviceorientation', (e) => {
console.log('absolute:', e.absolute);
}, { once: true });
};
// Muss durch eine Nutzeraktion ausgelöst werden
document.querySelector('#start').addEventListener('click', starte);Synthetisches Ereignis für Tests
const testEvent = new DeviceOrientationEvent('deviceorientation', {
alpha: 90, beta: 0, gamma: 0, absolute: true
});
window.addEventListener('deviceorientation', (e) => console.log(e.absolute, e.alpha));
window.dispatchEvent(testEvent);// Wichtig · Fallstricke
- Schreibgeschützt: Eine Zuweisung an
event.absolutewird ignoriert. Nur beim Konstruktornew DeviceOrientationEvent(type, { absolute })lässt sich der Wert festlegen (Standard:false). - Chromium: Seit Chrome 50 liefert
deviceorientationrelative Daten. Für absolute Werte gibt es das Ereignisdeviceorientationabsolute. - iOS Safari:
absoluteist in der Regelfalse. Die Kompassrichtung steckt stattdessen in der nicht standardisierten EigenschaftwebkitCompassHeading. Seit iOS 13 muss außerdemDeviceOrientationEvent.requestPermission()nach einer Nutzeraktion aufgerufen werden. - Sicherer Kontext: Sensor-Ereignisse gibt es nur über HTTPS. In iframes kann eine Permissions-Policy (
accelerometer,gyroscope,magnetometer) den Zugriff sperren. - Auch bei
absolute === truebezieht sichalphaauf den magnetischen Nordpol, nicht auf den geografischen. Die Werte können durch Metall oder Magnetfelder in der Nähe gestört sein. - Geräte ohne Sensoren liefern oft ein einzelnes Ereignis, bei dem alle Winkel
nullsind. Prüfe die Winkel deshalb immer aufnull.