Peter Lubbers - Pro HTML 5 Programming

264
CHAPTER 11 ■ THE FUTURE OF HTML5
Orientation
The simplest event to handle on a mobile device is the orientation event. The orientation event can be
added to the document body:
In the event handler for the orientation change, your code can reference the window.orientation
property. This property will give one of the rotation values shown in Table 11-1, which is relative to the
orientation the device was in when the page was initially loaded.
Table 11-1. Orientation Values and Their Meanings
Orientation
Value
Meaning
0 The page is being held in the same orientation as its original load.
-90 The device has been rotated 90 degrees clockwise (right) since the original load.
180 The device has been rotated upside-down since the original page load.
90 The device has been rotated 90 degrees counter-clockwise (left) since the page was
originally loaded.
Once the orientation is known, you can choose to adjust the content accordingly.
Gestures
The next type of event supported by mobile devices is a high-level event known as the gesture. Consider
gesture events as representing a multitouch change in size or rotation. This is usually performed when
the user places two or more fingers on the screen simultaneously and pinches or twists. A twist
represents a rotation, while a pinch in or out represents a zoom out or in, respectively. To receive gesture
events, your code needs to register one of the handlers shown in Table 11-2.
Table 11-2. Event Handlers for Gestures
Event Handler Description
ongesturestart A user has placed multiple fingers on the screen and has begun a movement.
ongesturechange The user is in the process of moving multiple fingers in a scale or rotation.
ongestureend The user has completed the scale or rotation by removing fingers.
x