scale-and-responsive

Set the scale mode to Phaser.Scale.RESIZE with width and height as '100%' so the canvas fills its parent. Then listen to the scale 'resize' event in your scene to reposition cameras and UI elements when dimensions change.

FIT scales the canvas via CSS to fit inside the parent while preserving aspect ratio, possibly leaving letterbox bars. RESIZE changes the actual canvas dimensions to match the parent with 1:1 pixel mapping, which can affect GPU fill-rate on large displays.

Call this.scale.startFullscreen() or this.scale.toggleFullscreen() from a pointerup input handler, not pointerdown, since browsers block fullscreen requests from pointerdown on touch devices. For iframes, the allowfullscreen attribute is required.

Auto-centering fails when the parent element has no calculable dimensions. Give the parent explicit CSS width and height, or rely on the default expandParent: true option which sets the parent or body height to 100%.

Use FIT mode with zoom set to Phaser.Scale.MAX_ZOOM and set pixelArt: true in the game config. MAX_ZOOM picks the largest integer multiplier fitting the parent, and pixelArt disables anti-aliasing for crisp rendering.

Use resize() only in NONE scale mode, where it sets game, base, and display sizes directly. Use setGameSize() with scaled modes like FIT or ENVELOP, since it changes the base game size while preserving the scale mode calculations.