Phaser.js - how to resize the game so that it always takes up the entire screen on different screens?

Question

Game development

Something I can not google anything worthwhile on this topic. There is this code:

game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.pageAlignHorisontally = true;
game.scale.pageAlignVertically = true;

but it essentially just aligns the canvas to the center of the screen, leaving margins to the right/left (or top/bottom, depending on the screen). And how to get rid of these fields is not clear.

Answer 1

In short, since no one answers me... After 3 days of searching, I came across a solution on StackOverflow:

(function() {
  var targetWidth = 640, // идеальная ширина приложения (под неё рисуем спрайты и т.п.)
        targetHeight = 960, // 640х960 - это iPhone 4, под меньшее разрешение наверно нет смысла делать
            
        deviceRatio = window.innerWidth / window.innerHeight,
        newRatio = (targetHeight / targetWidth) * deviceRatio,
            
        newWidth = targetWidth * newRatio,
        newHeight = targetHeight,
            
        game = new Phaser.Game(newWidth, newHeight, Phaser.CANVAS, ''); // последний аргумент - родитель (если пусто, значит canvas создастся в body)
            
        game.state.add('Boot', Boot);
        game.state.add('Preload', Preload);
        game.state.add('Game', Game);
            
        game.state.start('Boot');
})();

// ... Далее внутри Boot.js пишем

Boot.protoytpe = {
  create: function() {
    this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    this.scale.pageAlignHorisontally = true; // можно не выравнивать, но я остаил
    this.scale.pageAlignVertically = true;
    this.scale.forcePortrait = true;
  }
};