Disable auto-resizing in Phaser

Question

I'm creating a responsive game with Phaser. The width is fixed to 360 and the height gets calculated to a fitting ratio.

var height = (360 * screen.height) / screen.width;
var game = new Phaser.Game(360, ratio, Phaser.AUTO, "", {preload: preload, create: create, update: update});

In the create() function I then resize it to 100%, so the screen is filled:

function create () {
   document.querySelector("canvas").style.width = "100%";
   document.querySelector("canvas").style.height = "100%";
   // more stuff...
}

However, if I now click or do anything, the canvas gets resized back to 360xheight. How can I disable that?

Thanks

Answer 1

Phaser actually has the ability to scale the game/canvas to the width or height of the window built-in.

Try using the ScaleManager instead. In your case probably SHOW_ALL, and it can be set in your boot state (meaning early on in your code):

this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

You can see an example of this in practice in this tutorial on State, and the official example.