HTML and CSS Reference
When a user launches the game using the home screen shortcut, the game will be fullscreen—or more accurately the
document will be; in that case you won't need to display a button to switch to fullscreen, as mentioned previously in
the “The HTML5 Fullscreen API” section.
While iOS window.navigator.standalone is true when launched from the home screen, in Android there is no
such thing, so you will have to guess, using the difference between the window height and the client height. Here's a
snippet that works for both Android and iOS:
standalone = window.navigator.standalone || ( window.screen.height - window.innerHeight < 40 );
At the time of writing, the Android system bar alone is 25px tall and the system bar added to the Chrome
navigation bar makes a 73px tall block. In the snippet above, you check that the height difference between the window
and the device screen is below 40px, so you have good safety margin in case any of those values change.
Every OS provides different ways for users to add a web game to their home screen, and these ways are likely to evolve,
so be sure to check the links below so you can provide your users with the best experience possible.
A document detailing the home screen apps feature of Chrome for Android:
Information from Apple on how to build web applications for Safari:
All about the Open Web App manifest file for Firefox OS:
In this chapter you saw how to make a web game feel like a native one by running it fullscreen while maintaining
performance and sharpness. You also learned how to allow users to add your game amongst native ones on their
What is possible is to blur the lines between native and web games; this will continue evolve quickly, and we
are likely to see new APIs in each browser whose implementation will differ until some standards emerges. As more
exciting new features will be made possible for HTML5 games, you will have to keep an eye on what's new if you wish
to stay on top of the game!