Window: deviceorientation event

Baseline2023

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.

Thedeviceorientation 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.

SeeOrientation and motion data explained for details.

This event is not cancelable and does not bubble.

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

addEventListener("deviceorientation", (event) => { })ondeviceorientation = (event) => { }

Event type

ADeviceOrientationEvent. Inherits fromEvent.

Event properties

DeviceOrientationEvent.absoluteRead only: A boolean that indicates whether the device is providing orientation data absolutely.
DeviceOrientationEvent.alphaRead only: A number representing the motion of the device around the z axis, express in degrees with values ranging from 0 (inclusive) to 360 (exclusive).
DeviceOrientationEvent.betaRead only: A number representing the motion of the device around the x axis, expressed in degrees with values ranging from -180 (inclusive) to 180 (exclusive). This represents the front to back motion of the device.
DeviceOrientationEvent.gammaRead only: A number representing the motion of the device around the y axis, expressed in degrees with values ranging from -90 (inclusive) to 90 (exclusive). This represents the left to right motion of the device.
DeviceOrientationEvent.webkitCompassHeadingNon-standardRead only: A number represents the difference between the motion of the device around the z axis of the world system and the direction of the north, expressed in degrees with values ranging from 0 to 360.
DeviceOrientationEvent.webkitCompassAccuracyNon-standardRead only: The accuracy of the compass given as a positive or negative deviation. It's usually 10.

Examples

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,  );}const handleOrientationEvent = (frontToBack, leftToRight, rotateDegrees) => {  // do something amazing};