What are the right proportions of the Phaser canvas in Facebook instant games

Question

According to this tutorial and this question https://stackoverflow.com/a/50300726/2107253 I am using window.innerWidth and window.innerHeight to define the area in my Phaser 2 CE game.

But, when i display the proportions of my canvas on desktop and on a mobile device there are two different pairs of values, what is the right values I have to use in the new Phaser(...) instruction, and do I have to use SHOW_ALL or another scale value to scale the game on both desktop and mobile?

var game = new Phaser.Game(window.innerWidth, window.innerHeigh, Phaser.AUTO, 'game', { preload: preload, create: create, update: update });

The one on a desktop bellow :

The one on a mobile device is the same but the Width and Height values are :

Answer 1

The answer to your first question is it really depends upon the device being used.

That's why in the tutorial you linked to Emanuele uses the following code:

var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
if (windowWidth > windowHeight) {
    windowWidth = windowHeight / 1.8;
}
var gameWidth = windowWidth * gameOptions.gameHeight / windowHeight;
game = new Phaser.Game(gameWidth, gameOptions.gameHeight, Phaser.CANVAS);

He's grabbing the device's width/height and using that for the game display, instead of hard-coding specific values.

To answer your second question, yes, Phaser.ScaleManager.SHOW_ALL is generally used if you want your game to fill the entire screen. From what I understand, certain platforms, like iOS, 'require' that there are no black bars in order to pass review, but I'm unaware if Facebook Instant Games has the same requirement.