We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

DeviceOrientationEvent

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.

See also

Document Tags and Contributors

Contributors to this page: louisremi, cgack, Sheppy
Last updated by: louisremi,