This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The DeviceOrientationEvent provides web developers with information from the physical orientation of the device running the web page.
Warning: Currently, Firefox and Chrome do not handle the coordinates the same way. Take care about this while using them.
Constructor
DeviceOrientationEvent.DeviceOrientationEvent()- Creates a new
DeviceOrientationEvent.
Properties
DeviceOrientationEvent.absoluteRead only- A boolean that indicates whether or not 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 to 360.
DeviceOrientationEvent.betaRead only- A number representing the motion of the device around the x axis, express in degrees with values ranging from -180 to 180. This represents a front to back motion of the device.
DeviceOrientationEvent.gammaRead only- A number representing the motion of the device around the y axis, express in degrees with values ranging from -90 to 90. This represents a left to right motion of the device.
- DeviceOrientationEvent.webkitCompassHeading 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 Read only
- The accuracy of the compass means that the deviation is positive or negative. It's usually 10.
Example
window.addEventListener('deviceorientation', function(event) {
console.log(event.alpha + ' : ' + event.beta + ' : ' + event.gamma);
});
Specifications
| Specification | Status | Comment |
|---|---|---|
| Device Orientation Events | Working Draft | Initial specification. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 71 | Yes | 62 | ? | ? | ? |
DeviceOrientationEvent() constructor | 59 | ? | ? | ? | ? | ? |
absolute | 7 | Yes | 6 | ? | ? | ? |
alpha | 7 | Yes | 6 | ? | ? | ? |
beta | 7 | Yes | 6 | ? | ? | ? |
gamma | 7 | Yes | 6 | ? | ? | ? |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | Yes1 | Yes1 | Yes | 62 | No | 4.2 | ? |
DeviceOrientationEvent() constructor | 59 | 59 | ? | ? | ? | ? | ? |
absolute | Yes | Yes | Yes | 6 | No | 4.2 | ? |
alpha | Yes | Yes | Yes | 6 | No | 4.2 | ? |
beta | Yes | Yes | Yes | 6 | No | 4.2 | ? |
gamma | Yes | Yes | Yes | 6 | No | 4.2 | ? |
1. Before version 50, Chrome provided absolute values instead of relative values for this event. Developers still needing absolute values may use the ondeviceorientationabsolute event.
2. Firefox 3.6, 4, and 5 supported mozOrientation instead of the standard DeviceOrientationEvent interface.
See also
Document Tags and Contributors
Tags:
Contributors to this page:
fscholz,
lucian95,
Mrluobo,
jpmedley,
erikadoyle,
zeke,
kollishivagangadhar,
teoli,
Maroosko,
kscarfone,
justinpotts,
Jeremie
Last updated by:
fscholz,