Mobile orientation stretch problem

[sabdfresh]

Hey guys,

I reference below thread to scale my game to fit window. it works on desktop.
 

But i run on mobile and  open in wrong orientation, the game will be stretched.

I have set scale mode  showall, the game screen should  keep aspect ,right?

I don't have idea why the game will be stretch even i set in noscale.

I know the post http://www.emanueleferonato.com/2015/04/23/how-to-lock-orientation-in-your-html5-responsive-game-using-phaser/

you can hint user to rotate the mobile phone.

If i don't want to hint user to rotate mobile  and just want to scale game to fit window and no stretch.

Is there any good idea to solve this question? Thank you so much!

[DevJ]

I'm not a Phaser expert so  I'm not sure if this would work but you could try writing a function which constantly detects if the player has rotated his phone and if so, scale the canvas accordingly. Have the program collecting game.width and game.height at the beginning of your run and play with those variables.

/*Create theses two vars in the beginning of your run*/
var initialGameWidth = game.width;
var initialGameHeight = game.height;

function detectRotation(){
	if(if game.width != initialGameWidth && game.height != initialGameHeight){ /* this means the player will have turned his phone */
          game.width = window.availWidth;
          game.height = window.availHeight;
          /*if the above doesn't work, try to invert those so height becomes width and vice-versa*/
	}
}

 

[sabdfresh]

Hi DevJ ,

Thank you for your answer, unfortunately it didn't work.

All the way I try to set the scale dimension seem don't work.

Even I try to set the scale dimension in update, but the app will set it back.

I  find a simple way to solve it. Just don't set forceOrientation.

Now I change orientation, the screen will not be stretched.