HTML and CSS Reference
In-Depth Information
In-game Scrolling and Zooming
What if you want players to scroll, pinch, and zoom? In most situations you want to re-create that behavior in-
game instead of using the browser's built-in behavior. Touch events, described in detail in Chapter 10, “Boot-
strapping the Quintus Engine: Part II,” provide a mechanism for tracking multitouch that enables you to track
higher-level behaviors such as pinching to zoom.
Setting the Viewport
Preventing zooming and scrolling is good, but if you load the device on an iPhone, one of the first things you
notice is that none of the browser resizing seems to work. The green Canvas stays zoomed out.
The reason for this is that unless you tell the browser explicitly how big to make the page, it starts zoomed
out as if you were viewing a normal web page. To fix this you need to add a special meta tag to the head to set
the viewport (the visible area of the page). In games, the most common viewport setting is to set the viewport to
100% device resolution and prevent the user from scaling at all. Add the following meta tag to the head of your
document:
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
Reload the page on your mobile device to see the green Canvas zoomed in to take up the full page. Although
the viewport began as an iOS-only feature, it is now supported on Android and Mozilla's Fennec mobile
browser as well.
Lies, Damn Lies, and Pixels
In the good old days, pre-iPhone4, a web developer could count on a pixel being a pixel. With the introduction of
the iPhone 4's Retina display, suddenly that was no longer true. Because thousands of websites were developed
to the exact width of 320 pixels of the iPhone in portrait mode and would look foolish if shrunk down to a quarter
of their normal size, Apple introduced the idea of CSS pixels. The iPhone 4 and later still pretend to have resolu-
tions of 320 × 480, but they actually have double that resolution. To take advantage of that resolution, you can
jump through some hoops that will be discussed in Chapter 15, “Learning Canvas, the Hero of HTML5,” during
the in-depth discussion of Canvas. For now, most devices have trouble pushing pixels at a speed to make game
developers happy at 320 × 480, so this isn't necessarily something that you need to take advantage of immedi-
ately.
Removing the Address Bar
You can use one more trick to get a bit more real estate on the page, and that's to remove the address bar on iOS
devices. Do this using the trick of scrolling the page slightly after it is loaded:
window.scrollTo(0,1);
This works only if the content of the page is longer than the full size of the page. To make things more diffi-
cult, removing the address bar also affects the reported
innerHeight
of the page.
This presents a little bit of a problem because you want to resize the Canvas to the full size of the page, but
the size of the page may change after you've done the full resize. To get around this, you can simply set the
height of the container element to a value known to be larger than the final height without the address bar. Then
