Jump to content

Hide adress bar in mobile chrome / fullscreen


Yanifska
 Share

Recommended Posts

Hi there,

I understand from previous posts that using the fullscreen API would help in hiding the address bar in some browsers, especially in chrome (ios & Android).

However I haven't been able to use it at all.

Could someone share a piece of code or help in any ways with that thanks !

I have been searching in google and tried a few option but nothing worked for me.

 

Thank you a lot

Yaniv

Link to comment
Share on other sites

this piece of code will make the game full screen on chrome desktop, but not iOS or Android

  var goFS = document.getElementById("game");   goFS.addEventListener("click", function() {       var doc = window.document;  var docEl = doc.documentElement;  var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;  var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;  if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {    requestFullScreen.call(docEl);  }  else {    cancelFullScreen.call(doc);  }   }, false);
Link to comment
Share on other sites

Anyone knows how to start a game in fullscreen mode on Chrome  iOs or Android ?

 

I do not think this is possible.

 

Unlike an app, a webpage using the FullScreenApi (not available on IOs AFAIK), cannot be started in fullscreen because of security reasons.

Instead you must listen for some kind of input event and then trigger the fullscreen mode.

 

I recommend reading A Guide to the Phaser Scale Manager by Richard Davey.

It is available for downloading for free (or paying any amount you like).

 

Pages 24 to 26 talks about using fullscreen mode.

Link to comment
Share on other sites

  • 2 weeks later...

I do not think this is possible.

 

Unlike an app, a webpage using the FullScreenApi (not available on IOs AFAIK), cannot be started in fullscreen because of security reasons.

Instead you must listen for some kind of input event and then trigger the fullscreen mode.

 

I recommend reading A Guide to the Phaser Scale Manager by Richard Davey.

It is available for downloading for free (or paying any amount you like).

 

Pages 24 to 26 talks about using fullscreen mode.

 

Hey it was so easy with this !

Thank you a lot.

Now I need to resize the game when the game goes full screen.

My resize code is not working as expected.

 

Currently the game goes full screen when you click on the game title and then it moves to the game State.

however the resize code I added doesnt work.

It will work only if it is placed in the update function of the game state ( I tried placing it into the create function of the game State)

wierd....

 

Also I guess I need to add a full screen button in the game itself, so the user can go back to the full screen mode if he leaves the game and come back, for example.

Link to comment
Share on other sites

Finally I added a button inside the game, showing up only if the the browser has the fullscreen api.

When the button is pressed the fullscreen function is called.

Then when the full screenchange event is catched, a 1s timer will run the resize code

I had to use the timer because the resize code would not work immediately when the onscreen change event is fired.

 

// the button is added in the create functionif(!game.device.desktop && game.scale.compatibility.supportsFullScreen){fullscreenBtn = game.add.sprite(0, 0, 'uimenu',4);fullscreenBtn.anchor.x = 0.5;fullscreenBtn.fixedToCamera = true;fullscreenBtn.cameraOffset.setTo(game.width*0.5, 20);fullscreenBtn.updateTransform();fullscreenBtn.inputEnabled = true;fullscreenBtn.events.onInputDown.add(goFullScreen,this);}
function goFullScreen(){     game.scale.startFullScreen();}
function fullscreenChange(){console.log("resizing");game.time.events.add(Phaser.Timer.SECOND * 1, function() { console.log("resized");var gameWidth2 =  Math.max(window.innerWidth* window.devicePixelRatio, window.innerHeight* window.devicePixelRatio);    var gameHeight2 = Math.min(window.innerWidth* window.devicePixelRatio, window.innerHeight* window.devicePixelRatio);    var ratio2 = gameHeight2 / 640;    gameWidth2 /= ratio2;    gameHeight2 /= ratio2;    game.scale.setGameSize(gameWidth2, gameHeight2);if (game.scale.isFullScreen)    {fullscreenBtn.visible = false;}else{fullscreenBtn.visible = true;}}, this);}

I hope it can help any one.

Any feedback is appreciated.

 

EDIT: oh and don't forget in the boot state :

this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;

I didn't specify a target, it messed up the display on some device (I probably made a mistake somewhere.)

 

Anyway it seems to work for now.

I will update if I get more insight on this.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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