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:
ww.w3.org/TR/screen-orientation/
. 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
dow.orientation
.
Listing 24-4:
Handling window rotation
function rotateContainer() {
$("#quintus_container")[0].style.webkitTransform =
"rotate(" + -1*window.orientation + "deg)";
}
rotateContainer();
$(window).on("orientationchange",rotateContainer);
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.