Web/API/DeviceOrientationEvent

This is an experimental technologyCheck 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.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 to 360.
DeviceOrientationEvent.beta Read 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.gamma Read 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
DeviceOrientation Event Specification	Editor's Draft	Initial specification.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`DeviceOrientationEvent` Experimental'	Chrome Full support 7 Notes' Full support 7 Notes' Notes' Before version 50, Chrome provided absolute values instead of relative values for this event. Developers still needing absolute values may use the `ondeviceorientationabsolute` event.	Edge Full support 12	Firefox Full support 6 Notes' Full support 6 Notes' Notes' Firefox 3.6, 4, and 5 supported `mozOrientation` instead of the standard DeviceOrientationEvent interface.	IE No support No	Opera Full support 15	Safari Full support 5	WebView Android Full support ≤37 Notes' Full support ≤37 Notes' Notes' Before version 50, Chrome provided absolute values instead of relative values for this event. Developers still needing absolute values may use the `ondeviceorientationabsolute` event.	Chrome Android Full support 18 Notes' Full support 18 Notes' Notes' Before version 50, Chrome provided absolute values instead of relative values for this event. Developers still needing absolute values may use the `ondeviceorientationabsolute` event.	Firefox Android Full support 6 Notes' Full support 6 Notes' Notes' Firefox 3.6, 4, and 5 supported `mozOrientation` instead of the standard DeviceOrientationEvent interface.	Opera Android Full support 14	Safari iOS Full support 4.2	Samsung Internet Android Full support 1.0 Notes' Full support 1.0 Notes' Notes' Before Samsung Internet 5.0, Samsung Internet provided absolute values instead of relative values for this event. Developers still needing absolute values may use the `ondeviceorientationabsolute` event.
`DeviceOrientationEvent()` constructor Experimental'Non-standard'	Chrome Full support 59	Edge Full support ≤79	Firefox ?	IE No support No	Opera ?	Safari ?	WebView Android Full support 59	Chrome Android Full support 59	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android Full support 7.0
`absolute` Experimental'	Chrome Full support 7	Edge Full support 12	Firefox Full support 6	IE No support No	Opera Full support Yes	Safari ?	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 6	Opera Android Full support Yes	Safari iOS Full support 4.2	Samsung Internet Android Full support Yes
`alpha` Experimental'	Chrome Full support 7	Edge Full support 12	Firefox Full support 6	IE No support No	Opera Full support Yes	Safari ?	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 6	Opera Android Full support Yes	Safari iOS Full support 4.2	Samsung Internet Android Full support Yes
`beta` Experimental'	Chrome Full support 7	Edge Full support 12	Firefox Full support 6	IE No support No	Opera Full support Yes	Safari ?	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 6	Opera Android Full support Yes	Safari iOS Full support 4.2	Samsung Internet Android Full support Yes
`gamma` Experimental'	Chrome Full support 7	Edge Full support 12	Firefox Full support 6	IE No support No	Opera Full support Yes	Safari ?	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 6	Opera Android Full support Yes	Safari iOS Full support 4.2	Samsung Internet Android Full support Yes

Legend

Full support: Full support
No support: No support
Compatibility unknown: Compatibility unknown
Experimental. Expect behavior to change in the future.': Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.': Non-standard. Expect poor cross-browser support.
See implementation notes.': See implementation notes.