Responsive game size in mobile browser

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.

Does it scale to fit if you resize the window?

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

Do you have

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

?

Yes, i use this property/

Screenshot this?

What’s in the HTML?


<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.

This looks right for scale mode FIT.

What do you want it to look like?

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

It exists:

  object-fit: cover;

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

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

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

1 Like

Thank you!
I will try to use!
Is very similar what i need.

In line 23, the number 400 indicates the minimum height to which the camera zooms.

Ok, thanks!

Qugurun, i tried using your code and this is a great solution if we use simple background (just color) on the game. But if we use some image - this way not save ratio our background:

  1. Original ratio

  2. not original - image is distortion

I changed your code a little - remove upgrade function for bacground and set scale = 5 for background

let bg = this.add.image(window.innerWidth / 2, window.innerHeight / 2, 'bg').setScale(5)
		// bg.update = function () {
		// 	this.displayWidth = app.width
		// 	this.displayHeight = app.height
		// }

result:

And this is the result I was looking for!
Thank you, Qugurun!

2 Likes

I am glad that my decision helped you.
You can play around with this.

        let bg = this.add.image(window.innerWidth / 2, window.innerHeight / 2, 'bg')
        bg.orgWidth = bg.displayWidth
        bg.orgHeight = bg.displayHeight
        bg.update = function () {
            if (app.width * this.orgHeight/this.orgWidth < app.height){
                this.displayWidth = app.height * this.orgWidth/this.orgHeight
                this.displayHeight = app.height
            }else{
                this.displayWidth = app.width
                this.displayHeight = app.width * this.orgHeight/this.orgWidth
            }
        }

GIF 14.08.2022 7-06-29

In the horizontal view, it will always adjust proportionally in width, if the portrait view is proportional in height.

Cool, it’s more correct than using Scaling.
Exactly what is needed,thanks!