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

Setting the Viewport
The viewport meta tag informs the browser how to behave when it renders your web page. It represents the viewable
area, and is what is zoomed, scaled, and rotated. The default behavior of the viewport lends itself nicely to most web
sites, and gives the user a lot of control over how they can view the page. However, in a gaming environment it's best
to tweak these values to better suit the needs of your game. Listing 12-2 displays the viewport meta tag that is added to
the head of index.html in the Fakezee game.

Listing 12-2. The Viewport Meta Tag Is Used to Control How the Screen is Rendered

<meta name="viewport" content="user-scalable=no,width=device-width,initial-
scale=1 maximum-scale=1.0"/>

The content property for viewport can be set to customize the way the screen renders and reacts to user touches.
Preventing the user from scaling will essentially lock the assets in place and prevent default mobile browser behaviors.
You'll typically want to prevent your game from dragging around or zooming while the player is interacting with it.
Disabling user scaling on the viewport's content will prevent this from happening. The last three properties set in this
example assure you that your application will initially load at full scale and will take advantage of the entire available
screen real estate.

■ preventing users from scaling your content will lock your assets in place and prevent pinching or scrolling.
however, there is currently no way to prevent the browser from reacting to device orientation changes.

Note

Scaling Fakezee for Multiple Screen Size
It's extremely difficult to predict how your game will appear on all of the phone, tablet, and computer screens it might
come across. When it comes to handheld devices, your biggest challenge will be the limited space provided to you for
your content. This precious space is often cluttered with navigation bars and other browser UI that can't be avoided.
Before getting into the JavaScript code, some extra styles are needed. Place these styles in either a style block or
separate style sheet. Strip out the inline styles that are currently in the img and canvas elements in the index.html file
for Fakezee. Listing 12-3 shows the new styles and updated HTML elements.

Listing 12-3. The Updated Styles and HTML Elements for Fakezee

//updated styles
body{
background-color: #8b0000;
margin: 0;
}
#gameWrapper{
position: absolute;
}
canvas, img{
-webkit-transform-origin:0px 0px;
transform-orgin: 0 0;
position: absolute;
}