HTML and CSS Reference
In-Depth Information
Jumping to Full Screen
The changes to HTML and CSS necessary to jump to full screen are almost identical to those
for the BSBingo game. The one change we have made is to create this game at a 480×320
aspect ratio that will scale more evenly to various device sizes in landscape mode.
Canvas element
We will be using the following HTML Canvas element code:
<div style= "top: 0px; left: 0px; height: 100%; width: 100%;" >
<canvas id= "canvas" width= "480" height= "320" >
Your browser does not support the HTML 5 Canvas.
Notice that we have moved the DIV element that holds the game from the GeoBlaster Exten-
ded 50x , 50y starting point to 0 , 0 , using the top and left style attributes.
We also need to add in a set of meta-tags for Mobile Safari that will aid in informing the
device to run the application at full screen when the Home Screen icon is clicked.
<meta name= "viewport" content= "initial-scale=1 maximum-scale=1
user-scalable=0" //>
<meta name= "apple-mobile-web-app-capable" content= "yes" //>
<meta name= "apple-touch-fullscreen" content= "yes" >
<link rel= "apple-touch-icon" href= "icon.png" >
Also note that we have added the icon.png image as the referenced Home Screen icon when
the user adds the game to their Home screen from the website.
Style sheets
Next we need to add in the same style attributes for the canvas that we did with the BSBingo
< style
style type
type = "text/css" >
html , body
body {
background-color : #2f9acc ;
margin : 0px ;
padding : 0px ;
color : #fff ;
height : 100 % ;
overflow : hidden
hidden ;
Search WWH ::

Custom Search