W3cubDocs

deviceorientation

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.

General info

Specification: DeviceOrientation Event
Interface: DeviceOrientationEvent
Bubbles: No
Cancelable: No
Target: DefaultView (window)
Default Action: None

Properties

Property	Type	Description
`target` Read only	`EventTarget`	The event target (the topmost target in the DOM tree).
`type` Read only	`DOMString`	The type of event.
`bubbles` Read only	`Boolean`	Whether the event normally bubbles or not
`cancelable` Read only	`Boolean`	Whether the event is cancellable or not?
`alpha` Read only	double (float)	The current orientation of the device around the Z axis; that is, how far the device is rotated around a line perpendicular to the device.
`beta` Read only	double (float)	The current orientation of the device around the X axis; that is, how far the device is tipped forward or backward.
`gamma` Read only	double (float)	The current orientation of the device around the Y axis; that is, how far the device is turned left or right.
`absolute` Read only	`boolean`	This value is `true` if the orientation is provided as a difference between the device coordinate frame and the Earth coordinate frame; if the device can't detect the Earth coordinate frame, this value is `false`.

Example

if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation", function(event) {
        // alpha: rotation around z-axis
        var rotateDegrees = event.alpha;
        // gamma: left to right
        var leftToRight = event.gamma;
        // beta: front back motion
        var frontToBack = event.beta;

        handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
    }, true);
}

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

Browser Compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	7.0	(Yes)	3.6^[1]	?	?	?

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	3.0	(Yes)	3.6^[1]	No support	12	4.2

[1] Firefox 3.6, 4, and 5 supported mozOrientation versus the standard DeviceOrientation event.

Related Events