The deviceorientation and devicemotion events have been supported by the default iOS and Android browser for some time, and are now supported on the other major mobile browsers too. This creates opportunities for new types of interaction and this post acts as an introduction to those getting started with mobile orientation events, including some practical experience.
What’s Available
Most mobile devices incorporate a gyroscope, accelerometer and compass that, between them, can report the orientation and movement of the device in three dimensions.
The deviceorientation event returns an object with three properties: alpha, beta and gamma, corresponding to the device’s rotation in degrees around the Z, X and Y axes respectively.
alpha is reported by the compass, for example 90° = west.
A device lying flat should report beta and gamma values of zero.
From this position, tilting the device’s screen towards the right increases gamma towards 90° when it is fully pointing right. Tilting left decreases gamma towards to -90° when it is fully pointing left.
Similarly, tilting the device forward towards you increases beta towards 90° (when the screen is vertical and facing you), tilting it away decreases beta towards -90° (when it is upside down and facing away).
The devicemotion event returns information about the device’s acceleration and rotation rate in x, y and z.
Device and Browser support
Gyroscopes, compasses and accelerometers are standard in modern mobile devices and, in principal, the deviceorientation event is well supported by current mobile browsers.
In practice though, we have found wild variation in the values returned to the browser by different device-browser combinations.
What’s Really Available
The w3c documentation on these events is fairly prescriptive, but leaves a few loopholes for browser implementations. For example:
The event should fire whenever a significant change in orientation occurs. The definition of a significant change in this context is left to the implementation.
Although a threshhold of 1 degree is recommended, tests in Chrome on an HTC One M8 running Android 4.4.2 currently only seem to return alpha and gamma to a granularity of 90 degrees, and return NaN (Not a Number) for beta! Testing in the default Android browser on the same device gave expected values, however they appear to update only once per second.
Our initial testing was with a range of Samsung Galaxy devices using Chrome – these gave values as expected and updated values very frequently.
The exception to all of this is the alpha value reported by the compass – on most devices we tested it seems to be unreliable and erratic, though we found it reported reliably by a Galaxy S3 mini.
You can test your device-browser combo using our handy checker (a QR code link is shown for convenience if you view on a non-mobile browser).
Gotchas
You might expect that rotating your device fully around a single axis would produce values increasing smoothly from 0 to 360° then wrapping round. However, this is not the case:
- beta has a range of -180° to 180°
- gamma has a range of only -90° to 90°
Additionally, for example, tilting your device towards upright vertical increases beta, but as it approaches 90°, gamma can vary wildly across its whole range. This is partly due to ambiguity in the coordinate system, since certain orientations can be achieved by different sets of rotations, but the device and browser can introduce their own issues.
There is a bug logged for Chromium that highlights all of this quite well.
This is related to the phenomenon of Gimbal lock and the w3c documentation explains mapping the values to avoid such issues (for example using Quaternions).
Conclusions
Device orientation can supplement other means of input in an increasingly mobile-first world, and is not just a gimmick – consider that it offers various degrees of control without the use of your free hand or other external input.
However, variability in implementation on specific devices and browsers means that it can’t be relied on as the sole way of controlling some interaction. For example, we’re working on a prototype for mobile remote control where arrow buttons are displayed for control when device orientation is not being reported.
A post on that application is imminent, for now you can also read about mimicking the Amazon Fire Phone’s dynamic perspective feature using device orientation.