HTML and CSS Reference
In-Depth Information
Scaling the Game for the Browser
The cool thing about HTML5 Canvas, especially when it comes to Mobile Safari, is that we
can easily create applications that scale to the full screen of an iOS device and allow the user
toaddanicontotheirHomescreeninterface.Thisiconwillplaytheapplication infullscreen
(without the top browser bar) and will function just like an app downloaded from iTunes. The
need Internet access to use it.
Starting to create a full screen mobile version of BS Bingo
We now have a game that is shoved up into the top-left corner of the browser window, and
while it plays fine, it will be too small on a phone browser and will be shoved up into the
corneronatablet browser.Scaling thegame toworkonthedesktopandmobile devices isnot
difficult,butitwillrequiresomechangesandadditionstothecurrentcodeinthe bsbingo.html
The game's aspect ratio is not ideal for a mobile Safari full screen application, so we will see
soon enough that the buttons and text will look a little pixilated and not fit perfectly on the
iOS screens. However, this is only the first of two examples, and it will be good to see it in
action to educate ourselves about what changes we should make for the second application in
the chapter so that it will fit better on an iOS screen.
Changing the Canvas style properties
We will need to add some new styles to the file to help position and scale the .html file. I am
going to call this version bsbingo_scaled.html . Here are the styles we will need to add to take
the scaled Canvas full screen:
< style
style >
< style
style type
type = "text/css" >
html , body
body {
background-color : #2f9acc ;
margin : 0px ;
padding : 0px ;
color : #fff ;
height : 100 % ;
overflow : hidden
hidden ;
#canvas {
hidden ;
image - rendering : optimizeSpeed ;
overflow : hidden
Search WWH ::

Custom Search