W3cubDocs

/Web APIs

Device orientation events

Device orientation events are events that allow you to detect a device's physical orientation, as well as allowing you to detect the device's motion.

Concepts and usage

Mobile devices commonly have sensors such as gyroscopes, compasses, and accelerometers that can enable applications running on the device to detect the device's orientation and motion.

The device orientation events enable you to write web applications that can change their behavior based on the orientation of the user's device, and that can react when the user moves their device.

Some typical features for which you might want to use the device orientation events include:

  • in web-based games, to enable the user to control the motion of characters or objects in the game by tilting and moving the device
  • in mapping applications, to re-orient a map based on the device's position, or to provide turn-by-turn directions that update with the user's movements
  • for gesture recognition — for example, recognizing a "shake" gesture and using it to perform some action such as clearing an input area when the user shakes the device

Note: This API is widely supported on mobile browsers. While some desktop-only browsers may have limitations due to hardware differences, these constraints are rarely significant given the API's primary usage on sensor-equipped devices.

Interfaces

DeviceOrientationEvent

Represents changes in the physical orientation of a device.

DeviceMotionEvent

Represents changes in the acceleration of a device, as well as the rotation rate.

DeviceMotionEventAcceleration

Represents the amount of acceleration the device is experiencing along all three axes

DeviceMotionEventRotationRate

Represents the rate at which the device is rotating around all three axes.

Events

deviceorientation

Fired when fresh data is available from the device about the current orientation of the device as compared to the Earth coordinate frame.

devicemotion

Fired at a regular interval to indicate the amount of physical force of acceleration the device is receiving at that time, and the rate of rotation of the device.

deviceorientationabsolute

Fired when absolute device orientation changes.

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
Device_orientation_events 31 12 6 11 18 No 4.4.3 31 6 18 4.2 2.0
alpha 31 12 6 11 18 No 4.4.3 31 6 18 4.2 2.0
beta 31 12 6 11 18 No 4.4.3 31 6 18 4.2 2.0
gamma 31 12 6 11 18 No 4.4.3 31 6 18 4.2 2.0
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
Device_orientation_events 31 12 6 11 18 No 4.4.3 31 6 18 4.2 2.0
x 31 12 6 11 18 No 4.4.3 31 6 18 4.2 2.0
y 31 12 6 11 18 No 4.4.3 31 6 18 4.2 2.0
z 31 12 6 11 18 No 4.4.3 31 6 18 4.2 2.0
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
DeviceMotionEvent 59 14 29 No 46 No 59 59 29 43 No 7.0
Device_orientation_events 31 12 6 11 18 17 4.4.3 31 6 18 4.2 2.0
acceleration 31 12 6 11 18 17 4.4.3 31 6 18 4.2 2.0
accelerationIncludingGravity 31 12 6 11 18 17 4.4.3 31 6 18 4.2 2.0
interval 31 12 6 11 18 17 4.4.3 31 6 18 4.2 2.0
requestPermission_static No No No No No No No No No No 14.5 No
rotationRate 31 12 6 11 18 17 4.4.3 31 6 18 4.2 2.0
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
DeviceOrientationEvent 59 14 17 No 46 No 59 59 17 43 No 7.0
Device_orientation_events
7Before version 50, Chrome provided absolute values instead of relative values for this event. Developers still needing absolute values may use the deviceorientationabsolute event.
12
6Firefox 3.6, 4, and 5 supported mozOrientation instead of the standard DeviceOrientationEvent interface.
11 15 17
3Before version 50, Chrome provided absolute values instead of relative values for this event. Developers still needing absolute values may use the deviceorientationabsolute event.
18Before version 50, Chrome provided absolute values instead of relative values for this event. Developers still needing absolute values may use the deviceorientationabsolute event.
6Firefox 3.6, 4, and 5 supported mozOrientation instead of the standard DeviceOrientationEvent interface.
14 4.2
1.0Before Samsung Internet 5.0, Samsung Internet provided absolute values instead of relative values for this event. Developers still needing absolute values may use the deviceorientationabsolute event.
absolute 7 12 6 11 15 17 4.4 18 6 14 17 1.0
alpha 7 12 6 11 15 17 3 18 6 14 4.2 1.0
beta 7 12 6 11 15 17 3 18 6 14 4.2 1.0
gamma 7 12 6 11 15 17 3 18 6 14 4.2 1.0
requestPermission_static No No No No No No No No No No 14.5 No
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
Device_orientation_events 50 79 No No 37 No 50 50 No 37 No 5.0
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
Device_orientation_events 31 12 6 11 18 No 4.4.3 31 6 18 4.2 2.0
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
Device_orientation_events 7 12 63.6–6 11 12 No 3 18 64–6 12 4.2 1.0

api.Window.deviceorientation_event

BCD tables only load in the browser

api.Window.devicemotion_event

BCD tables only load in the browser

api.Window.deviceorientationabsolute_event

BCD tables only load in the browser

api.DeviceOrientationEvent

BCD tables only load in the browser

api.DeviceMotionEvent

BCD tables only load in the browser

api.DeviceMotionEventAcceleration

BCD tables only load in the browser

api.DeviceMotionEventRotationRate

BCD tables only load in the browser

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events