DeviceOrientationEvent

Baseline 2023 *
Newly available

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

* Some parts of this feature may have varying levels of support.

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

The DeviceOrientationEvent interface of the Device Orientation Events provides web developers with information from the physical orientation of the device running the web page.

Event DeviceOrientationEvent

Constructor

DeviceOrientationEvent.DeviceOrientationEvent()

Creates a new DeviceOrientationEvent.

Instance properties

DeviceOrientationEvent.absolute Read only

A boolean that indicates whether or not the device is providing orientation data absolutely.

DeviceOrientationEvent.alpha Read 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.beta Read only

A number representing the motion of the device around the x axis, express in degrees with values ranging from -180 (inclusive) to 180 (exclusive). This represents a front to back motion of the device.

DeviceOrientationEvent.gamma Read only

A number representing the motion of the device around the y axis, express in degrees with values ranging from -90 (inclusive) to 90 (exclusive). This represents a left to right motion of the device.

DeviceOrientationEvent.webkitCompassHeading Non-standard Read 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, express in degrees with values ranging from 0 to 360.

DeviceOrientationEvent.webkitCompassAccuracy Non-standard Read only

The accuracy of the compass means that the deviation is positive or negative. It's usually 10.

Example

js
window.addEventListener("deviceorientation", (event) => {
  console.log(`${event.alpha} : ${event.beta} : ${event.gamma}`);
});

Specifications

Specification
Device Orientation and Motion
# deviceorientation

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DeviceOrientationEvent
DeviceOrientationEvent() constructor
absolute
alpha
beta
gamma
requestPermission() static method
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

See also