While I was working on my mobile game, I came across an issue with forcing landscape and setting the correct screen width and height. After a few combinations of tries, I came up with this solution. This specifically works for Phaser JS projects that use Phonegap to make iOS apps.
main-directory - js -- game.js config.xml index.html
This will keep the mobile app in landscape orientation.
<?xml version="1.0" encoding="UTF-8" ?> ... <preference name="orientation" value="landscape" /> ... </widget>
index.html (Phaser JS):
Note the <meta> tag and the logic in the <script> tag. These will set the appropriate width and height in your app.
game.js (Phaser JS):
Elements in your game might need these width and height variables. Screen sizes shouldn’t be hardcoded, as they vary from device to device, so use screen.width and screen.height.
// var GAME_WIDTH = 568; // var GAME_HEIGHT = 320; var GAME_WIDTH = screen.height; var GAME_HEIGHT = screen.width;