Facebook Instant Games scaling for mobile

[Will5]

This topic has been discussed many times here, but unfortunately no solution has worked for me.

I uploaded a game on Facebook Instant which works well on desktop but looks bad on mobile.

Initially, I was using the following code:

var game = new Phaser.Game(1080, 1920, Phaser.AUTO, null, {preload: preload, create: create, update: update});

This is the scale mode:

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

As you'd expect, I ended up with vertical white bars left and right.

After days of googling and testing, I tried many other solutions which did work. I even tried using window.devicePixelRatio but I had no luck; it seems as if this code was ignored on mobile.

I also tried the following but nothing worked:

var game = new Phaser.Game(1080, 1920, Phaser.AUTO, null, {preload: preload, create: create, update: update});

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

 

So before giving up, I thought I'd ask you guys for help.

Thanks in advance.

[Will5]

I'm happy to say that I found the solution.

All I had to do is place the game inside a DIV container. Everything worked smoothly after that

[sathyaraj]

Hi @Will5 Can you show that piece of code. Even I am struggling with the same. Thanks in advance

[Will5]

Hey@sathyaraj , sure thing:

This was inside my JS file

game = new Phaser.Game(gameWidth, gameOptions.gameHeight, Phaser.CANVAS, 'canvas', {preload: preload, create: create, update: update});

This was in my HTML:

<div id="canvas"></div>

 

[matias_ini]

You can do it very easy in this way:

game = new Phaser.Game ('100%', '100%', Phaser.CANVAS);

Then you can get the real width and height reading game.width and game.height