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.

Learn more
See full compatibility

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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.

Syntax

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

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

ondeviceorientation = (event) => { }

Event type

A DeviceOrientationEvent. Inherits from Event.

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,
  );
}

function handleOrientationEvent(frontToBack, leftToRight, rotateDegrees) {
  // do something amazing
}