I have had lots of problems with the scaling in my Phaser 3 games at the beginning. Like you, I was used to the luxury of the Phaser 2 Scale Manager  However, meanwhile I have figured out a way that worked perfectly so far in all of my games and on all platforms / browsers. My resizeApp() function also takes into account the DPI values of different mobile devices. I noticed that even if I keep the ratio correct, different DPI values can STILL mess up my scaling. Since I've taken this into account it's working perfectly on all mobile devices that I've tested. What my resizeApp() function also does it centers the canvas on the screen and it always keeps the correct aspect ratio. And if the device screen has a different ratio than what you need for your game, it scales it to the maximum possible size while still keeping the proper ratio - thus adding a black bar on the top and bottom (like the movies that have to adhere their ratio but your TV has a different one). This prevents it from distorting the canvas by filling the entire screen with a wrong aspect ratio. When you copy-paste my code below, you need to adjust this line for your own game:
let game_ratio = (9 * 32) / (15 * 32);
let game_ratio = width / height; The width and height values must be the same that you provide in the config object when you create your Phaser game, such as: new Phaser.Game(config); let scenes = []; scenes.push(BootScene); scenes.push(PreloadScene); scenes.push(PlayScene); const config = { type: Phaser.AUTO, width: 9 * 32, // 288 height: 15 * 32, // 480 parent: 'phaser-app', scene: scenes }; let game = new Phaser.Game(config); Besides that, you can just copy-paste the code below and it should work. Anyways, here is the resizeApp() function: <script> function resizeApp() { // Width-height-ratio of game resolution let game_ratio = (9 * 32) / (15 * 32); // Make div full height of browser and keep the ratio of game resolution let div = document.getElementById('phaser-app'); div.style.width = (window.innerHeight * game_ratio) + 'px'; div.style.height = window.innerHeight + 'px'; // Check if device DPI messes up the width-height-ratio let canvas = document.getElementsByTagName('canvas')[0]; let dpi_w = (parseInt(div.style.width) / canvas.width); let dpi_h = (parseInt(div.style.height) / canvas.height); let height = window.innerHeight * (dpi_w / dpi_h); let width = height * 0.6; canvas.style.width = width + 'px'; canvas.style.height = height + 'px'; } // Add to resize event window.addEventListener('resize', resizeApp); // Set correct size when page loads the first time resizeApp(); </script>   Here is the HTML and CSS that you need to make it work: // HTML <body> <div id="phaser-app"></div> </body> // CSS <style> body { margin: 0; overflow: hidden; background-color: black; } #phaser-app { margin: 0 auto; display: flex; flex-direction: column; justify-content: center; } canvas { width: 100%; height: 100%; } </style>   Hope it helps!