Device orientation

Device motion

Device motion provides information about force of acceleration being applied to the device at a given moment, and the rate of rotation.

In this guide

TL;DR

Use device motion for when the current motion of the device is needed.
rotationRate is provided in °/sec.
acceleration and accelerationWithGravity is provided in m/sec ² .
Be aware of differences between browser implementations.

When to use device motion events

There are several uses for device motion events. For example:

Shake gesture to refresh data.
In games to cause characters to jump or move.
For health and fitness apps

Check for support and listen for events

To listen for DeviceMotionEvent s, first, check to see if the events are supported in the browser. Then, attach an event listener to the window object listening for devicemotion events.

                              
                                    if (window.DeviceMotionEvent) {
      window.addEventListener("devicemotion", deviceMotionHandler);
      setTimeout(stopJump, 3*1000);
    }
    
                               View full sample

Handle the device motion events

The device motion event fires on a regular interval and returns data about the rotation (in ° per second) and acceleration (in m per second ² ) of the device, at that moment in time. Some devices do not have the hardware to exclude the effect of gravity.

The event returns four properties, accelerationIncludingGravity , acceleration , which excludes the effects of gravity, rotationRate and interval .

For example, let’s take a look at a phone, lying on a flat table, with it’s screen facing up.

State	Rotation	Acceleration (m/s ² )	Acceleration with gravity (m/s ² )
Not moving	[0, 0, 0]	[0, 0, 0]	[0, 0, 9.8]
Moving up towards the sky	[0, 0, 0]	[0, 0, 5]	[0, 0, 14.81]
Moving only to the right	[0, 0, 0]	[3, 0, 0]	[3, 0, 9.81]
Moving up & to the right	[0, 0, 0]	[5, 0, 5]	[5, 0, 14.81]

Conversely, if the phone were held so the screen was perpendicular to the ground, and was directly visible to the viewer:

State	Rotation	Acceleration (m/s ² )	Acceleration with gravity (m/s ² )
Not moving	[0, 0, 0]	[0, 0, 0]	[0, 9.81, 0]
Moving up towards the sky	[0, 0, 0]	[0, 5, 0]	[0, 14.81, 0]
Moving only to the right	[0, 0, 0]	[3, 0, 0]	[3, 9.81, 0]
Moving up & to the right	[0, 0, 0]	[5, 5, 0]	[5, 14.81, 0]

Sample: Calculating the maximum acceleration of an object

One way to use device motion events is to calculate the maximum acceleration of an object. For example, what’s the maximum acceleration of a person jumping.

                              
                                    if (evt.acceleration.x > jumpMax.x) {
      jumpMax.x = evt.acceleration.x;
    }
    if (evt.acceleration.y > jumpMax.y) {
      jumpMax.y = evt.acceleration.y;
    }
    if (evt.acceleration.z > jumpMax.z) {
      jumpMax.z = evt.acceleration.z;
    }
    
                               View full sample

After tapping the Go! button, the user is told to jump! During that time, the page stores the maximum (and minimum) acceleration values, and after the jump, tells the user their maximum acceleration.