How to make the whole game (canvas) scaled in height and width, on any device

Phaser 3
1

Hello, I study Phaser JS, the original site https://www.phaser.io/ created the first game, which is presented on the site and began to create its own game.
here is the game code

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>Making your first Phaser 3 Game - Part 3</title>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">
/*
  var config = {
    type: Phaser.AUTO,
    backgroundColor: '#2dab2d',
    scale: {
        mode: Phaser.Scale.WIDTH_CONTROLS_HEIGHT,
        _parent: 'phaser-example',
        width: 768,
        height: 1024
    },
    */
       
   var config = {
    type: Phaser.AUTO,
       
       
    width: 768,
    height: 1024,
    
      
   
    
   
     physics: {
        default: 'matter',
        matter: {
            gravity: {
                x: 0,
                y: 0
            }
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};
    var girl;
var timedEvent;
var platforms;
    var strelka;
    var game = new Phaser.Game(config);
    function preload ()
    {
        /*загружаем данные в загрузчик */
        this.load.image('backgraund', 'sprites/1_0000s_0005_bg.jpg');
        this.load.image('girl', 'sprites/1_0000s_0001s_0000_Layer-981.png');
        this.load.image('labal1', 'sprites/1_0000s_0002_Group-9.png');
        this.load.image('krug', 'sprites/1.png');
        this.load.image('strelka', 'sprites/1_0000_arrowdown.png');
     
    }
    function create ()
    {
        
        
        /*создаем размешаем фон координаты указаны по центру но можно по верхенму левому --
        this.add.image(0, 0, 'sky').setOrigin(0, 0)*/
/*
        platforms = this.physics.add.staticGroup();
        platforms.create(0, 703, 'girl').setOrigin(0, 0);
*/
        this.add.image(0, 0, 'backgraund').setOrigin(0, 0);
        
        var line = new Phaser.Geom.Line(100, 500, 700, 100);
    var graphics = this.add.graphics({ lineStyle: { width: 4, color: 0xaa00aa } });
    graphics.strokeLineShape(line);
        
      girl= this.matter.add.image(0, 703, 'girl').setOrigin(0, 0);
        /*
        girl.alpha = 0.5;
        */
      var label =  this.add.image(130, 469, 'labal1').setOrigin(0, 0).setInteractive();
        /*
        var sprite = this.add.sprite(400, 300, 'eye').setInteractive();
        */
        label.on('pointerdown', function (pointer) {
        console.log("down");
            document.location.replace("https://yandex.ru/");
    });
    label.on('pointerout', function (pointer) {
        console.log("out");
    });
    label.on('pointerup', function (pointer) {
        console.log("up");
    });
        
       strelka =  this.matter.add.image(320, 670, 'strelka').setOrigin(0, 0);
        
        /*
        
        this.add.overlap(girl, strelka, collectStar, null, this);
        */
        
        this.matter.world.on('collisionstart', function (event, girl, strelka) {
       girl.gameObject.setTint(0xff0000);
        strelka.gameObject.setTint(0x00ff00);
    });
timedEvent = this.time.delayedCall(5000, onEvent, [], this);
          
    }
    /*
    
    window.addEventListener('resize', function (event) {
    game.scale.resize(window.innerWidth, window.innerHeight);
}, false);
*/
    function update ()
    {
         girl.x = girl.x +10;
        strelka.y = strelka.y + 10;
        girl.alpha = girl.alpha-0.01;
        /*
         Phaser.Actions.RotateAround( girl, { x: 400, y: 300 }, 0.01);
         */
        
        girl.setOrigin(0, 0);
girl.angle++;
/*Для правого верхнего угла:*/
girl.setOrigin(1, 0);
girl.angle++;
/*Для бота в правом углу:*/
girl.setOrigin(1, 1);
girl.angle++;
/*Для левого угла бота:*/
girl.setOrigin(0, 1);
girl.angle++;
        
        /*
        console.log(girl.Alpha);
       console.log(girl.globalAlpha);
       console.log(girl.opacity);
        Phaser.Actions.SetAlpha(girl, 0.5, 0.5);
        girl.globalAlpha = 0.5;
        girl.Alpha = 0.5;
        girl.SetAlpha = 0.5;
      
            girl.frame.pivotY =10;
        girl.frame.pivotX =10;
        girl.frame.rotated = 100;
        */
    }
    function onEvent ()
{
    this.add.image(-30, 731, 'krug').setOrigin(0, 0);
   /* girl.kill();*/
    girl.destroy(true); 
    girl = 'null';
    
     
}
    
    function collectStar () {
    console.log("huy");
    }
</script>

</body>
</html>

the question is how to make the whole game (canvas) scale in height and width on any device

I tried it like this

  var config = {
    type: Phaser.AUTO,
    backgroundColor: '#2dab2d',
    scale: {
        mode: Phaser.Scale.WIDTH_CONTROLS_HEIGHT,
        _parent: 'phaser-example',
        width: 768,
        height: 1024
    },

but gives an error

Uncaught TypeError: Cannot read property ‘WIDTH_CONTROLS_HEIGHT’ of undefined
at (index):21

2

You’ll need to use the current version of Phaser from the CDN (3.18.1).

3

You can try to use the scaling strategy I posted here.