Being a Good Mobile Citizen - HTML5 Mobile Game Development - page 93

In Canvas-based games this is normally fine; for DOM-based games that might support older versions of IE,
you want the full string. Because this example uses <canvas> , the rest of the examples in this chapter use the
shorter string.
Dealing with Browser Resizing, Scrolling,
and Zooming
Just because players bring up your game in a browser at a certain size doesn't mean it's going to stay that way.
Users may resize their desktop browser or may rotate their mobile device to get a better view. Most mobile
devices that support HTML5 also enable users to pinch to zoom in and out of the page. You must consider all
these actions when you develop a game on mobile.
Handling Resizing
Even if you don't intend to resize your game when played on the desktop, you should consider adjusting the
game to fit the screen on mobile as the player will most likely rotate the device to get a better view of the game.
Listing 6-1 shows what code that adjusts the size of the Canvas element each time the browser is resized
would look like. Because there isn't a game attached to this example, the code that calls the game code to let
it know that it's been resized has been commented out. This is the // Game.resize(newDim); line. You
can see this example by running resize.html in the chapter code.
Listing 6-1: resize.html—A self-resizing Canvas
<script>
// Wait for the document.ready callback
$(function() {
var maxWidth = 480;
var maxHeight = 440;
var initialWidth = $("#game").attr('width');
var initialHeight = $("#game").attr('height');
var handleResize = function() {
// Get the window width and height
var w = window.innerWidth, h = window.innerHeight,
newDim;
if(w <= maxWidth) {
newDim = { width: Math.min(w,maxWidth),
height: Math.min(h,maxHeight) };
$("#game").css({position:'absolute', left:0, top:0 });
$("#container").css('width','auto');
} else {
newDim = { width: initialWidth,
height: initialHeight };
$("#game").css('position','relative');
$("#container").css('width',maxWidth);