Table of Contents for

The Modern Web

Orientation

The Orientation API detects changes to the device’s position in 3-D space—that is, movement up and down, left and right, and clockwise and counterclockwise. This movement is measured with an accelerometer, and the devices that are most likely to contain one are those that are most portable; mobile phones and tablets move frequently so are very likely to have one, laptops move to some degree so may contain one, and desktops and TVs move so infrequently that it’s very unlikely they’ll have an accelerometer or access to this API.

Using orientation events opens up new possibilities for interaction and navigation; some apps already provide an option to control page scrolling by tilting the device forward or backward, and navigation between tiles or pages by tilting to the left or right.

Before detailing the API, I should talk about three-dimensional axes (you can skip this paragraph if you know about them already). All movement in three dimensions has three directions, or axes, commonly referred to as x, y, and z. If you hold a device in front of you now (or imagine you are doing so), the x-axis runs from left to right, y from top to bottom, and z toward you and away from you, as shown in Figure 6-3. Movement is measured along these axes from the center of the device and is either positive or negative: Bringing the device closer to you moves it positively along the z-axis and away moves it negatively. Lowering the device toward your feet moves it negatively along the y-axis and moving it to your right moves it positively along the x-axis.

Figure 6-3. Movement along the three-dimensional axes

To detect the movement along each axis, use the deviceorientation event on the window object. This event fires every time the device moves and returns an object with a series of useful orientation properties:

window.addEventListener('deviceorientation',function (orientData) {
  …
}, false);

The three key properties that are germane to movement are alpha, beta, and gamma. Each is measured with a number representating degrees of rotation, although some are constrained within set limits.

As a very simple example, the code in the following script uses deviceorientation to detect changes to the orientation and then logs the three values to the console:

window.addEventListener('deviceorientation',function (orientData) {
  console.log(orientData.alpha,orientData.beta,orientData.gamma);
}, false);

In the example file orientation.html, you can see a slightly different version that updates the text on the page when orientation changes; open it on a mobile or tablet device and move the device around to see the page content update.