Mobile optimizing

Phaser 3
1

Does anyone have any experience setting up their game for mobile optimization?

I have an isometric game I am developing that looks sort of how I would like on desktop, but once on mobile it doesnt zoom correctly…

Here is desktop:

Capture
Capture1600×860 876 KB

And here is mobile (galaxy s10e on firefox):

Screenshot_20210520-162100_Firefox
Screenshot_20210520-162100_Firefox1080×2280 614 KB

I have the following in my index.php header:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, minimal-ui=1" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

and my game config looks like this:

var config = {
max: {
	width: 1920,
	height: 1080
},
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
width: window.innerWidth * window.devicePixelRatio,
height: window.innerHeight * window.devicePixelRatio

},
backgroundColor: 0xFFFFFF,
antialias: false,
renderer: Phaser.CANVAS,
type: Phaser.WEBGL,
physics: {
	default: "matter",
	arcade: {
		debug:true	
	}
	
	,
	matter: {
		debug: true,
		debugShowBody: true,
		debugBodyColor: 0x0000ff
	}
	
},
scene: [ BootScene, GameScene ]
}


const game = new Phaser.Game(config);