scale-and-responsive

Set the scale mode to Phaser.Scale.RESIZE with width and height as '100%' in the game config, then listen to the scale 'resize' event in your scene. In the handler, resize cameras and reposition UI elements based on the new gameSize dimensions.

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

Set autoCenter to Phaser.Scale.CENTER_BOTH in the scale config. The parent element must have calculable CSS dimensions, since centering applies marginLeft and marginTop based on the parent's computed bounds.

Fullscreen requests from pointerdown are blocked on touch devices unless the document already received touch input. Always call startFullscreen or toggleFullscreen from a pointerup handler, and add the allowfullscreen attribute when running inside an iframe.

Subscribe to the scale 'orientationchange' event, which delivers an orientation string like 'landscape-primary'. You can check game.scale.isPortrait or isLandscape and call lockOrientation('landscape') on mobile browsers that support it.

Use resize() only in NONE scale mode, where it directly sets game, base, and display sizes. Use setGameSize() with scaled modes like FIT or ENVELOP so the ScaleManager re-applies the scaling calculations after changing the base game size.