I’ve just posted on the new Phaser forums how you can scale your HTML5 games on any device. Naturally, it occurred to me I should also add it to my Dev Blog here!

My scaling method also considers the device’s DPI. You can easily scale your games on desktop with simple width / height 100%. But mobile devices have different DPI values and then your game still stretches in ugly ways, even if it scales properly on Desktop.

In addition to the JS code I also added the HTML and CSS code to this blog post here, for those that need it.

HTML

Firstly, make sure the div for the Phaser game has an ID of “phaser-app”:
<div id="phaser-app"></div>

CSS

To make it work, we need to combine CSS with JavaScript. Here’s the CSS code:

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%;
}

JavaScript Code

const config = {
	type	: Phaser.AUTO,
	parent	: 'phaser-app',
	width	: 360,
	height	: 640,
	scene	: scenes
};

let game = new Phaser.Game(config);

The Actual Re-Size Code in JavaScript

Now add this JavaScript code to your game and let me know in the comments if you have ways to further improve it!

function resizeApp ()
{
    // Width-height-ratio of game resolution
    // Replace 360 with your game width, and replace 640 with your game height
    let game_ratio = 360 / 640;
	
    // 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 * game_ratio;
	
    // Scale canvas	
    canvas.style.width	= width + 'px';
    canvas.style.height	= height + 'px';
}

window.addEventListener('resize', resizeApp);

The Ultimate Phaser 3 Guide

Everything you need to make real, polished, professional Phaser 3 games, you find it in this guide here: HTML5 Game Development Mini-Degree

I highly suggest you check it out!