HTML and CSS Reference
In-Depth Information
Next, you must add an event listener to listen for changes in the device orientation:
if
(
window
.
DeviceOrientationEvent
)
{
window
.
addEventListener
(
"deviceorientation"
,
function
(
event
)
{
//alpha: rotation around z-axis
var
rotateDegrees
=
event
.
alpha
;
//gamma: left to right
var
leftToRight
=
event
.
gamma
;
//beta: front back motion
var
frontToBack
=
event
.
beta
;
handleOrientationEvent
(
frontToBack
,
leftToRight
,
rotateDegrees
);
},
false
);
}
var
handleOrientationEvent
=
function
(
frontToBack
,
leftToRight
,
rotateDegrees
){
//do something with the event
};
Now that you have the data, what do the variables mean and how do you put them to
use? When you tilt the device from side to side, this is referred to as
beta
(
Figure 8-1
).
Tilting from front to back is
gamma
(
Figure 8-2
), and rotating the phone while facing
up (on the Z axis) is known as
alpha
(
Figure 8-3
).
Figure 8-1. Beta positioning for the Device Orientation API
