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
<div style=
"top: 0px; left: 0px; height: 100%; width: 100%;"
>
<canvas
<canvas id=
"canvas"
width=
"480"
height=
"320"
>
Your browser does not support the HTML 5 Canvas.
</canvas>
</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.
Meta-tags
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
<meta name=
"viewport"
content=
"initial-scale=1 maximum-scale=1
user-scalable=0"
//>
<meta
<meta name=
"apple-mobile-web-app-capable"
content=
"yes"
//>
<meta
<meta name=
"apple-touch-fullscreen"
content=
"yes"
>
<link
<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
game:
<
style
style type
type
=
"text/css"
>
html
html
,
body
body
{
background-color
background-color
:
#2f9acc
;
margin
margin
:
0px
;
padding
padding
:
0px
;
color
color
:
#fff
;
height
height
:
100
%
;
overflow
overflow
:
hidden
hidden
;
}
