Jump to content

Best practice for mobile full screen


Recommended Posts



I'm trying to have an application template which handle properly device orientation and fullscreen.

I've started with the project template in phaser : https://github.com/photonstorm/phaser/tree/master/resources/Project%20Templates/Full%20Screen%20Mobile

The problem is that it does not work (anymore?) with chrome on Android device: navigation bar is always shown. It works with firefox on Android.

So my idea was to use the full screen mode.


It can only be triggered with an user action so I've plugged it on the game start button, so the game is not fullscreen from start.

And with the fullscreen mode, the device orientation recognition with the hidden div telling to rotate the device does not work anymore.


My question is : what do you use to do this?

Fullscreen at some point in the game + working device rotation recoginition


you don't bother with this, it's OK to have the navigation bar on chrome...



Link to comment
Share on other sites

Yes this is it.

it does not work anymore the way it is handled in https://github.com/photonstorm/phaser/tree/master/resources/Project%20Templates/Full%20Screen%20Mobile

It uses an hidden div with id "orientation" with this image in background: https://github.com/photonstorm/phaser/blob/master/resources/Project%20Templates/Full%20Screen%20Mobile/images/orientation.jpg

this div is shown when the orientation is not the good one (css display = block).

I have idea how to make it works (with a sprite in the main game div) but I don't know if I need to do it + fullscreen (real one with a call to this.scale.startFullScreen()) does not work immediatly, a button must be clicked and I don't like it very much.

I would have prefer to make work the same mechanism as in the template project but I can't make it work with chrome on Android: navigation bar does not hide.

Link to comment
Share on other sites

can you post some example code from your project. I use this piece of code, and it is working fine, It goes full screen and device orientation works, and I don't see any navigation bar.

goFullScreen: function() {  this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT;  if (this.game.scale.isFullScreen) {    this.game.scale.stopFullScreen();  } else {  this.game.scale.startFullScreen();     }}
Link to comment
Share on other sites

  • 2 weeks later...

OK I managed to make it works on Android + IPhone with device orientation check.

I don't use startFullScreen anymore, after a lot of trials, the following code works quite well (some pixels can be lost at the bottom so I manage it in game design) :

create: function () {        this.input.maxPointers = 1;        this.stage.disableVisibilityChange = true;        BasicGame.orientated = true;        this.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT;        this.scale.minWidth = this.game.width / 2;        this.scale.minHeight = this.game.height / 2;        this.scale.pageAlignHorizontally = true;        this.scale.pageAlignVertically = true;        if (this.game.device.desktop)        {            this.scale.maxWidth = this.game.width;            this.scale.maxHeight = this.game.height;            this.scale.setScreenSize(true);        }        else        {            this.scale.maxWidth = this.game.width * 2.5;            this.scale.maxHeight = this.game.height * 2.5;            this.scale.forceOrientation(false, true);            this.scale.hasResized.add(this.gameResized, this);            this.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this);            this.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this);            this.scale.setScreenSize(true);        }        this.state.start('CheckOrientation');    },

Device orientation hint is handled as in Phaser full screen template project with an hidden div.

<body>    <div id="game"></div>    <div id="orientation"></div>
enterIncorrectOrientation: function () {        BasicGame.orientated = false;        document.getElementById('orientation').style.display = 'block';    },    leaveIncorrectOrientation: function () {        BasicGame.orientated = true;        document.getElementById('orientation').style.display = 'none';        this.scale.setScreenSize(true);    }

I call again setScreenSizeTrue in leaveIncorrectOrientation, which is not done in phaser template I think.


I hope this will help some people with the same issues.

Link to comment
Share on other sites

Yes of course. I am trying to make a template for simple HTML5 games. It's not finished at all but you will find this working part in it. There is still a lot of magic number in the code.

The source code: https://bitbucket.org/vcarluer/html5gaverttemplate

Live example: http://www.gamersassociate.com/html5/vert/


In Android Chrome: It fits below the address bar, no page scroll, some bottom of the game screen is lost.

In Android Firefox: It does not fit directly on screen, it fits without the address bar, so it may cause problem with gesture because page can be scroll down

In Safari IPhone 4 & 5: It fits perfectly below the address bar (I've not done a lot of tests with it, have to buy one...). No page scroll, none of the game screen is lost I think.


You can rotate the phone in portrait mode before or after the game loading. When you come back to portrait mode it fits the same way it was (this was what I tried to achieved first).


Tell me if you find bugs, I'm chasing them for now. This coding part is painful and it does not generates a lot of code, but it's important to find the right match!

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...