Building for Mobile Browsers - Beginning HTML5 Games with CreateJS - page 280

Figure 12-2. Fakzee scaled to fit in portrait orientation for Android (left) and iOS (right)
Although you've seen these results in the above figures, the function is not quite complete. With the new scale
property acquired, it needs to be applied to the canvas (see Listing 12-8).
Listing 12-8. Updating the Styles to Scale the Canvas and Background Image
canvas.setAttribute("style", "-webkit-transform:scale(" + scale + ")");
bg.setAttribute("style", "-webkit-transform:scale(" + scale + ")");
window.scrollTo(0, 0);
The scaling is accomplished via transform styles on the canvas and background image, which are set with
JavaScript. Lastly, the window scroll is set to 0, which can help remove unwanted address bars on mobile devices.
Optimizing Fakezee for iOS Home Pages
A really cool feature of iOS is the ability to save a bookmark to a site on your home page. However, this feature goes
beyond being a simple bookmark. Using the appropriate meta tags and image preparation, you can get your game to
appear and behave much like a native application.
Adding the Web App Meta Tags
Two more meta tags are needed to optimize Fakezee to behave the way you want it to when being launched from the
home screen. These two meta tags are shown in Listing 12-9.