I had minimal html markup for a web game which used RESIZE scale mode as following
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My Game</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/app.css">
<script src="js/phaser.min.js"></script>
</head>
<body>
<div id="game-container">
<div id="mygame"></div>
</div>
<script src="js/game.js"></script>
</body>
</html>
The game was started with the following statement
var mygame;
window.onload = function () {
mygame = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, "mygame");
mygame.state.add("Boot", Boot);
mygame.state.add("Loading", Loading);
mygame.state.add("TheGame", TheGame);
mygame.state.start("Boot");
}
code of Boot class
// ---------------boot---------------------
var Boot = {
init: function () {
mygame.scale.scaleMode = Phaser.ScaleManager.RESIZE;
},
preload: function () {
mygame.stage.backgroundColor = 0x510100;
mygame.load.image("loading", "images/loading.png");
},
create: function () {
mygame.state.start("Loading");
}
};
When the game was loaded initially on mobile, it took the available space on the mobile screen for that orientation but turning the mobile device to other orientation did not correctly fit in the available space. Initially it looked like an issue with the width and height values received by the resize method of the game state as it was taking the correct width of the device but the height was proportaionate to game size in previous orientation. There was no other css applied to the div ids. When I checked width and height of “game-container”, it was also showing incorrect width and height for the available screen space. It looked like width was seen correctly but height was calculated incorrectly. In order to fix this I added some CSS to make sure height is seen correctly by all HTML elements.
body {
padding: 0px;
margin: 0px;
}
html, body {
height: 100%;
}
#game-container, #mygame{
height: 100%;
}
Important thing to note here is child elements inherit height from the parent element so it is important to set height of html and body elements as well. The default value for html and body elements is auto.
These changes made my phaser game work correctly on mobile devices for both orientations. In case someone is facing similar issue, look out for HTML and CSS issues. The possibility of this being some html/css related issue is more as opposed to Phaser js.