Forcing Landscape in Phonegap and Phaser

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.

Directory structure:

- js
-- game.js

config.xml (Phonegap):

This will keep the mobile app in landscape orientation.

<?xml version="1.0" encoding="UTF-8" ?>
 <preference name="orientation" value="landscape" />

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.

 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1,minimal-ui">
 #game_div {
 /* removed width: 320px */
 <div id="game_div"></div>
<script type="text/javascript" src="js/phonegap.js"></script>
<script type="text/javascript" src="js/game.js"></script>
 document.getElementById('game_div').style.height = (screen.height > screen.width) ? screen.width : screen.height;
 document.getElementById('game_div').style.width = (screen.width > screen.height) ? screen.height : screen.width;

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;

One thought on “Forcing Landscape in Phonegap and Phaser”

Leave a Reply

Your email address will not be published. Required fields are marked *