Game Resolution and Resize problem

[nunziox]

I have a problem with the resizig.

 

 

When I do the resizing of the page I get this result:

 

 

 

Currently when I open the page I get the result in the figure below instead I would like to have the same results that I have with the resize.

 

 

This is the portion  of the interesting code:

var w = window.innerWidth * window.devicePixelRatio,h = window.innerHeight * window.devicePixelRatio;var game = new Phaser.Game(w,h, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render });

  function gameSet(){    game.scale.maxWidth = 1920;    game.scale.maxHeight = 1080;    game.scale.startFullScreen();    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;    game.scale.forceLandscape = true;    game.scale.setScreenSize(true);    game.scale.setShowAll();    game.scale.refresh() }

 function create() {   [...]   gameSet();   [...] }

[plicatibu]

Check this post. I think it will solve your problem.

[nunziox]

I tried the code in the post that you have suggested me, but i have a problem, the game is not correctly resized.

 

 

 

This is my code:

BootState.prototype = {    preload : function(){    ;},    create:  function(){       this.game.canvas.id = 'game';        this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;        this.scale.minWidth = gameWidth/2;        this.scale.minHeight = gameHeight/2;        this.scale.maxWidth = gameWidth;        this.scale.maxHeight = gameHeight;       if (this.game.device.desktop){            this.scale.pageAlignHorizontally = true;            this.scale.pageAlignVertically = true;            this.scale.setScreenSize(true);        }else{            this.scale.maxWidth = 2048; //You can change this to gameWidth*2.5 if needed            this.scale.maxHeight = 1228; //Make sure these values are proportional to the gameWidth and gameHeight            this.scale.pageAlignHorizontally = true;            this.scale.pageAlignVertically = true;            this.scale.forceOrientation(true, false);                        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);       }       var ow = parseInt(this.game.canvas.style.width,10);  var oh = parseInt(this.game.canvas.style.height,10);  var r = Math.max(window.innerWidth/ow,window.innerHeight/oh);       var nw = ow*r;       var nh = oh*r;       this.game.canvas.style.width = nw+"px";       this.game.canvas.style.height= nh+"px";       this.game.canvas.style.marginLeft = (window.innerWidth/2 - nw/2)+"px";        this.game.canvas.style.marginTop = (window.innerHeight/2 - nh/2)+"px";       document.getElementById('game').style.width = window.innerWidth+"px";       document.getElementById("game").style.height = window.innerHeight-1+"px";//The css for body includes 1px top margin, I believe this is the cause for this -1       document.getElementById("game").style.overflow = "hidden";             game.state.start('GameState');    ;},    update : function(){    ;}}BootState.prototype.gameResized = function(width, height){}BootState.prototype.enterIncorrectOrientation = function(){document.getElementById('game').style.display = 'block';}BootState.prototype.leaveIncorrectOrientation = function(){document.getElementById('game').style.display = 'none';}

[plicatibu]

Sorry for taking so long to answer.

 

Unfortunately I don't have a clue why it's happening.

 

Maybe the author of the thread I shared early with you could help you.