What is the right size of the area in Facebook instant games to use it with Phaser

Question

I am coding a game in Phaser 2 CE so the actual code is bellow according to https://stackoverflow.com/a/50300726/2107253 but when i open the game in my mobile device or on the desktop the image is not displayed in center and it is hidden

var game = new Phaser.Game(640, 480, Phaser.AUTO, 'game', { preload: preload, create: create, update: update });
var sprite;

function  preload () {
  // This is equivalent to <https://examples.phaser.io/assets/>.
  this.load.image('dude', 'assets/sprites/phaser-dude.png');
}

function create() {
  sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'dude');
  sprite.inputEnabled = true;
  sprite.events.onInputDown.add(myHandler, this);
}

function myHandler() {
  sprite.x += 10;
}

function update() {

}

Answer 1

When you do a search there are some related questions https://stackoverflow.com/a/49034911/2107253 So you can try this code it works fine, because you create a game based on the inner property of the device window, and you scale it with SHOW_ALL which is fine according to the book named A Guide to the Phaser Scale Manager that you can fine here https://gumroad.com/photonstorm

//If you use PixelRatio, the sprite will be smaller according to the resolution of the mobile device

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

var sprite;

function  preload () {
  // This is equivalent to <https://examples.phaser.io/assets/>.
  this.load.image('dude', 'assets/sprites/phaser-dude.png');
}

function create() {
  game.stage.backgroundColor = 0x3b5998;
  game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'dude');
  sprite.inputEnabled = true;
  sprite.events.onInputDown.add(myHandler, this);
}

function myHandler() {
  sprite.anchor.setTo(0.5, 0.5);
  sprite.x = Math.floor(Math.random() * PixelW);
  sprite.y = Math.floor(Math.random() * PixelH);
}

function update() {

}