HTML and CSS Reference
In-Depth Information
Depending on your device, as you rotate your device every time the screen rotates, you should see values in
increments of 90 that tell you what angle the device is at. Although it seems like it should be easy to decode this
value, it's not that simple.
Phones, specifically the iPhone and the Galaxy Nexus, treat the normal portrait position as a
win-
dow.orientation
value of 0. Neither supports an upside-down portrait, so there is no 180 value. The
iPhone has two landscape orientations: 90 and -90, whereas the Galaxy Nexus treats landscape direction as hav-
ing a
window.orientation
of 90.
For tablets it's more confusing. The Kindle Fire and iPad both treat normal portrait mode as having an ori-
entation of 0, but they also support an inverted portrait mode with an orientation of 180 that is not supported on
phones. Other tablets, such as the Android ASUS Transformer, treat landscape mode as an orientation of 0, and
everything else is rotated off this.
These different values are not, however, out of line with the specification; for the ASUS tablet, an orientation
of 0 is given to landscape mode because landscape is defined as the tablet's “standard orientation.”
The idea of a “standard orientation” is an important concept for a device because the
deviceorient-
ation
events are also all relative to the standard orientation and assume that standard orientation is always
portrait mode.
Getting Started with Device Orientation
Events
When you want more information than just the screen portrait or landscape orientation, it's time to dive into
the
deviceorientation
event, which gives you three angular values indicating precisely how the device
is held in 3-D space and is triggered at a high rate as the device is adjusted.
The specification associated with device orientation is the DeviceOrientation Event Specification; the latest
version is available at:
www.w3.org/TR/orientation-event/
.
The most important event is
deviceorienta-
tion
, which you can use to determine the angle at which you are holding your device.
Although this event is useful in mobile devices, desktop browsers have also started supporting the event
(MacBooks started including an accelerometer a couple of years ago), and it's available in Chrome. Firefox also
has support for it, but at least in OS X, Firefox doesn't trigger the event. Desktop IE, Safari, and Opera don't
have support as of this writing.
Detecting and Using the Event
To see if your browser supports the event, you can check for the existence of the event object on the window:
if (window.DeviceOrientationEvent) {
// Device orientation supported
}
Firefox pre-version 6 had support for a nonstandard
OrientationEvent
, but since version 6 it has sup-
ported the standard event.
