HTML and CSS Reference
In-Depth Information
If you fire the game up on a mobile device, you immediately notice a problem: While the game is playable,
it's small by default, and the canvas element is overriding the touch events, which means zooming in is difficult.
(You can zoom by pinching on the whitespace around the canvas.) This is remedied in the next section.
Maximizing the Game
Screen real estate on mobile devices is valuable especially for mobile games. The last thing you want to do is
waste some of that real estate by not having maximized the game.
Setting the Viewport
The first step is to tell the browser that you don't want to let users zoom in and out of the page. This is done
by setting a viewport <meta> tag in the HTML. The viewport tag began its life as an iOS-only feature but has
since spread to Android as well. Add the following to the <head> of your HTML document.
<meta name="viewport" content="width=device-width, user-scalable=0,
minimum-scale=1.0, maximum-scale=1.0"/>
This tag tells the browser to set the width of the page to the actual device's pixel width and not to let the user
zoom in and out. Chapter 6, “Being a Good Mobile Citizen,” discusses this tag in depth.
If you reload the page, you notice the game is zoomed in a bit but still doesn't correctly fit on the page.
Resizing the Canvas
To fix the size issue and set the game up on the page so it fits as well as possible, there are a few extra steps that
need to be taken. This is more difficult than it may seem due to various mobile peculiarities. Chapter 6 covers
this topic in depth, but following is the basic pseudo-code:
Check if browser has support for touch events
Exit early if screen is larger than a max size or no touch support
Check if the user is in landscape mode,
if so, ask them to rotate the browser
Resize container to be larger than the page
to allow removal of address bar
Scroll window slightly to force removal of address bar.
Set the container size to match the window size
Check if you're on a larger device (like a tablet)
if so, set the view size to be twice
the pixel size for performance
Search WWH ::

Custom Search