HTML and CSS Reference
In-Depth Information
Imagine for a moment that you have made a portrait game designed at 768×1,024 pixels. This means that you've
created some layout information about where things go in this canvas space, and most likely you have defined the
positions of elements in terms of pixels. If you're lucky, your game will be loaded on a device with an identical aspect
ratio but a different resolution. That is, you can still be at 4:3, but with double the number of pixels. In this scenario,
all your positioning data will be off; your content will be clustered at one corner of the screen, wasting valuable screen
real estate.
A slightly worse scenario is that your app may be loaded on a device with a drastically different aspect ratio and
dpi. In this case, things won't ever come close to looking right. To solve these problems, you first need to make an
executive decision about what to do with your canvas at a high level; thankfully, the solution is simple.
Stretch
The most straightforward way to address responsive design is simply to stretch the canvas to the size of the whole
screen, as shown in Figure
13-2
. This is probably the easiest solution, but it only works in situations in which
the device aspect ratio matches the desired one. The code that follows solves this problem, setting your canvas
dimensions to the window dimensions:
var canvas = document.getElementById('canvas');
cvs.width = window.innerWidth;
cvs.height = window.innerHeight;
Figure 13-2.
Stretch example
Float Middle
In reality, stretching the canvas to match the resolution of the device is a bad idea when the aspect ratio doesn't
match. In these cases, you have to determine how to position your canvas such that you maintain your desired aspect
ratio but can still fit your work properly on the screen.
Because the viewport fits the width of the game to the screen, you can adapt the height of your gameplay to be as
tall as the smallest aspect ratio to which you'll be deploying. In other words, if you're deploying to Android, and the
smallest height of the screen is 500 pixels (with the viewport on which you'll be running), then that's the maximum
height with which the user should be allowed to interact. When the game is playing on a device that has, say, 768
pixels in height, the gameplay will float in the middle, and the background can have more design and ambiance
