HTML and CSS Reference
The following URL shows the complete code to configure the web app for different
There are several tags in the <head> secion to set up the web app. The viewport tags can
have several opions.
Please use maximum-scale with cauion. On the Web, we usually don't want to restrict
the scaling of a page. Some users may need to zoom in to the content to read it in an easier
fashion. Content accessibility has a higher priority than visual scale controlling. However,
when we distribute the content as an app, we want to disable the scaling, so we set both
the maximum and minimum scale to 1.0 .
Mobile app distribution
Another way to publish the game would be by distribuing the game as a mobile app. All we
need to do is use a mobile web view to present the HTML inside a naive mobile applicaion.
Alternaively, we can use Adobe PhoneGap Build for this purpose. In some games, we can
use a naive renderer, such as CocoonJS from Luide, to boost the rendering performance
while distribuing the game to the mobile App Store.
We can even take the mobile web game further by making it work offline. This is done using a
technique called applicaion cache manifest. You can read a detailed explanaion on it on the
following Mozilla Developer Network page:
Take an online game, PieGuy , as an example. Try to use an iOS mobile device by following the
1. Go to http://mrgan.com/pieguy .
2. Bookmark the game as the home screen.
3. Open the game once for the system to load the asset files.
4. Restart the game and get into the offline mode, such as the airplane mode.
5. Open the game from the home screen and the game sill works.