Creating a Sushi Shop Game with Device Scaling - HTML5 Game Development - page 330

You can refer to the following article on how the viewport affects the
rendering of a web page: https://developer.mozilla.org/
en/docs/Mozilla/Mobile/Viewport_meta_tag .
3. Then, we have several iOS-only setups. The following tag allows iOS to recognize
the game as a mobile web app:
<meta name="apple-mobile-web-app-capable" content="yes">
4. Then, we configure the app icon:
<link rel="apple-touch-icon" href="images/icon.png">
5. When the web page is installed in the home screen as a web app, it shows a
launching screen upon startup. We can define the launching screen with the
following meta tag placed in the head secion:
<link rel="apple-touch-startup-image"
href="images/default.png">
6. The mobile screen is too small, so we need to rearrange the customer graphics
and the sushi bubble graphics. We add the following code to the showUp method
of the customer:
Customer.prototype.showUp = function() {
...
// existing code goes here.
// scale down if in small screen
if (game.stage.canvas.width<= 320){
this.scaleX = this.scaleY = 0.6;
}
if (game.stage.canvas.height<= 150) {
bubble.x = -40;
bubble.y = -50;
bubble.scaleX = bubble.scaleY = 1.5;
this.scaleX = this.scaleY = 0.5;
};
};