Handle Mobile Screen Rotation

To properly handle mobile users rotating their devices, we have to go deeper than just JavaScript. First of all, in the Source editor, find the “index.html” file and in the <body> (at the bottom) place an ‘orientation’ <div>:

<div id="orientation"></div>

Then, in the ‘main.css’ add these rules:

#orientation {
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../assets/orientation.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgb(0, 0, 0);
    z-index: 999;
    display: none;

Change the background image and colour if you please.

Finally, in the boot state (boot.js) we add the actual orientation handlers.

We add a global variable for orientation checking later in the game e.g. to pause it and 3 new functions: init, enterIncorrectOrientation and leaveIncorrectOrientation:

"use strict";
//global variable, can be used to pause the game on orientation change
var orientated = false;

window.MobileOrientation.state.boot = {
    init: function() {
        //checks whether the device is mobile or desktop
        if (!this.game.device.desktop) {
            //centers the canvas
            this.scale.pageAlignVertically = true;
            this.scale.pageAlignHorizontally = true;

            // forces orientation. First parameter is for landscape, 2nd - portrait. Enable only one
            this.scale.forceOrientation(true, false);
            //orientation change callback functions
            this.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this);
            this.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this);


    preload: function() {
        // set world size
        this.game.world.setBounds(0, 0, mt.data.map.worldWidth, mt.data.map.worldHeight);

        // enable resize

        //init mt helper

        //set background color - true (set also to document.body)

        // load assets for the Loading group ( if exists )
    create: function() {
        // add all game states
        for (var stateName in window.MobileOrientation.state) {
            this.game.state.add(stateName, window.MobileOrientation.state[stateName]);

        // goto load state

    // reference to fit screen function - used to remove resize later
    _fitScreen: null,
    enableFitScreen: function() {
        var game = this.game;

        var resizeGame = this._fitScreen = function() {

        window.addEventListener('resize', resizeGame, false);

    disableFitScreen: function() {
        window.removeEventListener('resize', this._fitScreen);

    //both functions change the orientation variable and settings of the 'orientation' div in index.html
    enterIncorrectOrientation: function() {

        orientated = false;

        document.getElementById('orientation').style.display = 'block';


    leaveIncorrectOrientation: function() {

        orientated = true;

        document.getElementById('orientation').style.display = 'none';


Note that the forceOrientation method does not actually force the orientation of your device – that’s impossible. It simply makes rules about which position is considered correct and which isn’t.

Check on your mobile device here (Your mobile browser must be set to view pages in mobile mode). Alternatively, you can play around with mobile emulation in the browser’s developer tools.

Full sample available here.

Leave a Reply

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