GeezerVison is showing developer.mozilla.org — Window: deviceorientation event - Web APIs | MDN
Window: deviceorientation event
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2023.
The deviceorientation event is fired when fresh data is available from an orientation sensor about the current orientation of the device as compared to the Earth coordinate frame. This data is gathered from a magnetometer inside the device.
See Orientation and motion data explained for details.
This event is not cancelable and does not bubble.
Use the event name in addEventListener():
js
addEventListener("deviceorientation", (event) => { })
Alternatively, assign to the event handler property of the interface:
js
ondeviceorientation = (event) => { }
js
if (window.DeviceOrientationEvent) {
window.addEventListener(
"deviceorientation",
(event) => {
const rotateDegrees = event.alpha; // alpha: rotation around z-axis
const leftToRight = event.gamma; // gamma: left to right
const frontToBack = event.beta; // beta: front back motion
handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
},
true,
);
}
function handleOrientationEvent(frontToBack, leftToRight, rotateDegrees) {
// do something amazing
}