HTML and CSS Reference
In-Depth Information
Making the game mobile friendly
Making a game work on a mobile plaform is not only about the screen resoluion, but also
about changing from a mouse cursor input to touches and a lot of performance tuning. In this
task, we make the game work beter on mobile phones by providing touch screen support.
Prepare for lift off
When we publish the game on the Web, we can have several seings to enhance the
experience when playing on a mobile touch device. We add the following launch screen
and app icon to the images folder:
We need another library to help improve the clicking events on a DOM element in mobile
devices. It eliminates a clicking delay that is added by the mobile plaform. We will discuss
the delay later. Download the fastclick.js file from
fastclick and add it to the vendors folder. Make sure we import this file in the index.
html file.
Engage thrusters
1. First, we enable the touch event for the customer view:
cjs.Touch.enable(game.stage, /*single touch=*/ true,
/*allow default=*/ true);
2. Add the following meta tags to the index.html file. It tells the mobile device to
use the real screen resoluion to display the content. Otherwise, the mobile device
will try to simulate the screen width of a desktop:
<meta name="viewport" content="width=device-width,
initial-scale=1.0, minimum-scale=1.0,
maximum-scale=1.0, minimal-ui">
Search WWH ::

Custom Search