HTML and CSS Reference
In-Depth Information
Dealing with Browser Rotation
Turning your device past the point where it changes orientation brings to the forefront a major problem with
device orientation in HTML5 games: As a web developer you currently have no way to lock the display to pre-
vent rotation. If the users angle their phones too much, they end up swapping between landscape and portrait
mode or vice versa. There is no complete way around this except to build your game in such a way as to dis-
courage the users from turning the device too much.
The good news is that there is a specification for a Screen Orientation API that includes the capability to lock
the screen: . The bad news is this specification has been implemented only in
Firefox Mobile, as of this writing.
Until the Screen Orientation API becomes more commonplace, a partial solution is to examine the win-
dow.orientation value whenever there is an orientationchange event. window.orientation
contains the value in degrees of the orientation from the default position that the device is held. This is actually
a little more complicated than you might think because the window.orientation value is not consistent
across devices or platforms as you saw in the section “Looking at a Device Orientation.”
For handling devices other than Android phones, which currently appear to, unfortunately, treat landscape
mode in either direction as having a window.orientation of 90, you can add the code in Listing
24-4 before the Q.Scene code in orient.js to transform the container based on the value of win-
dow.orientation .
Listing 24-4: Handling window rotation
function rotateContainer() {
$("#quintus_container")[0].style.webkitTransform =
"rotate(" + -1*window.orientation + "deg)";
Q.scene('level',new Q.Scene(function(stage) {
The rotateContainer method is WebKit vendor prefix specific, but it can be extended to other browsers
by handling the various prefixes for rotation. It gives a value for window.orientation and rotates the con-
tainer element back in the other direction so that the container's angle is unchanged.
As mentioned earlier, because Android phones, as of this writing, give only an orientation value of 90 (never
-90), this fix won't work for those phones when the device is rotated -90 degrees.
Need More Control?
The DeviceOrientation event specification provides a more complex event called devicemotion that gives
even finer-grain control over device motion. It provides an acceleration and an accelerationInclud-
ingGravity child object that have raw x , y , and z acceleration values. It also has a rotationRate object
that provides alpha , beta , and gamma values for the rotation of the device over a given period of time.
devicemotion is a little more difficult to work with and in most situations doesn't provide a lot of additional
value, but if you need finer-grained control, check out the details in the specification linked earlier.
Search WWH ::

Custom Search