How to make Phaser3 html5 game which runs on browser and whose size is not only dynamic but also renders the sprite and other stuff perfectly

Phaser 3
1

How to make Phaser3 html5 game which runs on browser and whose size is not only dynamic but also renders the sprite and other stuff perfectly. I am making a html5 game which runs on browser of Desktop PC. My code is something like this

    const config= {
  type:Phaser.AUTO,//Use webgl as api for 2d and 3d graphics
  width: 800,
  height:600,
  physics:{
    //Arcade Physics plugin manages physics simulations
    default:'arcade',
    arcade:{
      gravity:{y:400},
      debug:true
    }
  },
  scene:{
    preload:preload,
    create: create,
    update: update
  },

}

The problem is that my game needs to be responsive for mobile browsers to and not only canvas of it needs to fit perfectly but it also needs the sprite to be rendered perfectly. Please help as I am newbie in phaser3

2

You can try this in the config:

  pixelArt: true,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
  }
3

This video tutorial addresses this problem: