HTML and CSS Reference
In-Depth Information
document.addEventListener("fullscreenchange", function () {
if(document.fullscreen == false) onFullscreenLose();
}, false);
document.addEventListener("mozfullscreenchange", function () {
if(document.mozFullScreen == false) onFullscreenLose();
}, false);
document.addEventListener("webkitfullscreenchange", function () {
if(document.webkitIsFullScreen == false) onFullscreenLose();
}, false);
Going Further
The fullscreen API is still a working draft, and browsers are using prefixed names. I recommend abstracting the
fullscreen API using screenfull.js, an awesome cross-browser wrapper for the fullscreen API by Sindre Sorhus. You can
Also be aware that the fullscreen API isn't available in all browsers at the time of writing; when it's not available,
you can resort to using some hacky techniques like scrolling programmatically to hide the address bar. Check
Lowering the Resolution
Your game may very well benefit from lowering its resolution. While CPU power is certainly a bottleneck, fillrate is limited
on mobile GPUs (graphics processing units). It is worth noting that fillrate limitations may impact your performance
whenever you are using WebGL or Canvas2D since the latter is hardware accelerated and thus uses the GPU.
There is a trend of increased resolution for mobile screens while at the same time GPUs have constraints
regarding power consumption and heat production. Not every device with a comfortable resolution will be able to
render your game at 60 Hz if you size your canvas at 100% of the screen.
■
Note
the fillrate is the number of pixels a gpU can render during a second.
When to Lower Resolution
To test if you are fillrate bound on a device, lower the viewport dimensions. If the framerate increases, you are fillrate
bound and will benefit from lowering your game resolution.
In the case of a 2D game, you could be fillrate bound because your game is using plenty of transparent layers. You
may want to lower the number of transparent sprites before having to resort to lower the resolution. Also, note that
if you are using WebGL, fillrate depends on shader complexity, so it's always worth checking if you can simplify your
fragment shader, for instance by moving code to your vertex shader.
Fillrate varies widely from one device to another, so it's worth testing your game on as many devices as you can.
Listing 15-4 shows some code to compute the frame rate.
