Responsive game size in mobile browser

Phaser 3
#1

Hello all!
I have a question about game resizing - how i can do responsive game for mobile browser&
I use this properties in config:
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
},

On PC - game looks ok, on all screen.
But, if open the game in mobile browser - game have small size, not responsive.

#2

Does it scale to fit if you resize the window?

#3

Yes, on PC if i resize, the game size is responsive

#4

Do you have

<meta name="viewport" content="width=device-width, initial-scale=1">

?

#5

Yes, i use this property/

#6

Screenshot this?

What’s in the HTML?

#7

Screen
Screen1232×628 384 KB

#8 

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Game</title>
	<style>
		body {
			padding: 0;
			margin: 0;
			background-color: #000;
		}
	</style>
</head>

Tag <body> has only scripts.

#9

This looks right for scale mode FIT.

What do you want it to look like?

#10

It would be OK if background get all screen size on mobile, like css property backround-size: cover;

#11

It exists:

  object-fit: cover;

oh but im not sure it’s for img and video inittial

#12

I know this property in css - it uses for video and images, but how this use in Phaser?
Can you show example?

#13

One of the possible options, made by me.
Youtube: https://youtu.be/Q9tEcOsouJk

Live: https://qugurun.github.io/phaser3/scale/index.html
Source: https://github.com/Qugurun/qugurun.github.io/tree/main/phaser3/scale