# Responsive game size in mobile browser

**URL:** <https://phaser.discourse.group/t/responsive-game-size-in-mobile-browser/12088>\
**Category:** Phaser 3\
**Created:** [July 30, 2022, 5:04pm UTC](https://phaser.discourse.group/t/responsive-game-size-in-mobile-browser/12088 "2022-07-30T17:04:50Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Daniil861](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/daniil861/32/6796_2.png) [@Daniil861](https://phaser.discourse.group/u/Daniil861)\
**Post date:** [July 30, 2022, 5:04pm UTC](https://phaser.discourse.group/t/responsive-game-size-in-mobile-browser/12088/1 "2022-07-30T17:04:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [July 30, 2022, 5:45pm UTC](https://phaser.discourse.group/t/responsive-game-size-in-mobile-browser/12088/2 "2022-07-30T17:45:22Z")

</div>

> [@Daniil861](#):
>
> On PC - game looks ok, on all screen.

Does it scale to fit if you resize the window?

---

<div class="post-metadata">

**Author:** ![Daniil861](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/daniil861/32/6796_2.png) [@Daniil861](https://phaser.discourse.group/u/Daniil861)\
**Post date:** [July 31, 2022, 9:28am UTC](https://phaser.discourse.group/t/responsive-game-size-in-mobile-browser/12088/3 "2022-07-31T09:28:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [August 1, 2022, 4:02pm UTC](https://phaser.discourse.group/t/responsive-game-size-in-mobile-browser/12088/4 "2022-08-01T16:02:24Z")

</div>

Do you have

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

```

?

---

<div class="post-metadata">

**Author:** ![Daniil861](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/daniil861/32/6796_2.png) [@Daniil861](https://phaser.discourse.group/u/Daniil861)\
**Post date:** [August 1, 2022, 5:08pm UTC](https://phaser.discourse.group/t/responsive-game-size-in-mobile-browser/12088/5 "2022-08-01T17:08:22Z")

</div>

Yes, i use this property/

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [August 1, 2022, 6:19pm UTC](https://phaser.discourse.group/t/responsive-game-size-in-mobile-browser/12088/6 "2022-08-01T18:19:36Z")

</div>

> [@Daniil861](#):
>
> But, if open the game in mobile browser - game have small size, not responsive.

Screenshot this?

What’s in the HTML?

---

<div class="post-metadata">

**Author:** ![Daniil861](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/daniil861/32/6796_2.png) [@Daniil861](https://phaser.discourse.group/u/Daniil861)\
**Post date:** [August 2, 2022, 5:49am UTC](https://phaser.discourse.group/t/responsive-game-size-in-mobile-browser/12088/7 "2022-08-02T05:49:14Z")

</div>

![Screen](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/8/80334a71b2bf9a9b1bd6ce3fab07ca4f584f2cbf.png)

---

<div class="post-metadata">

**Author:** ![Daniil861](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/daniil861/32/6796_2.png) [@Daniil861](https://phaser.discourse.group/u/Daniil861)\
**Post date:** [August 2, 2022, 5:54am UTC](https://phaser.discourse.group/t/responsive-game-size-in-mobile-browser/12088/8 "2022-08-02T05:54:18Z")

</div>

> [@samme](#):
>
> What’s in the HTML?

```javascript

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

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [August 2, 2022, 5:07pm UTC](https://phaser.discourse.group/t/responsive-game-size-in-mobile-browser/12088/9 "2022-08-02T17:07:43Z")

</div>

This looks right for scale mode FIT.

What do you want it to look like?

---

<div class="post-metadata">

**Author:** ![Daniil861](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/daniil861/32/6796_2.png) [@Daniil861](https://phaser.discourse.group/u/Daniil861)\
**Post date:** [August 2, 2022, 7:44pm UTC](https://phaser.discourse.group/t/responsive-game-size-in-mobile-browser/12088/10 "2022-08-02T19:44:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Oliver77](https://avatars.discourse-cdn.com/v4/letter/o/7ea924/32.png) [@Oliver77](https://phaser.discourse.group/u/Oliver77)\
**Post date:** [August 4, 2022, 9:02am UTC](https://phaser.discourse.group/t/responsive-game-size-in-mobile-browser/12088/11 "2022-08-04T09:02:08Z")

</div>

It exists:

```javascript
  object-fit: cover;

```

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

---

<div class="post-metadata">

**Author:** ![Daniil861](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/daniil861/32/6796_2.png) [@Daniil861](https://phaser.discourse.group/u/Daniil861)\
**Post date:** [August 4, 2022, 2:06pm UTC](https://phaser.discourse.group/t/responsive-game-size-in-mobile-browser/12088/12 "2022-08-04T14:06:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Qugurun](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/qugurun/32/5132_2.png) [@Qugurun](https://phaser.discourse.group/u/Qugurun)\
**Post date:** [August 9, 2022, 7:43pm UTC](https://phaser.discourse.group/t/responsive-game-size-in-mobile-browser/12088/13 "2022-08-09T19:43:39Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![Daniil861](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/daniil861/32/6796_2.png) [@Daniil861](https://phaser.discourse.group/u/Daniil861)\
**Post date:** [August 10, 2022, 7:47am UTC](https://phaser.discourse.group/t/responsive-game-size-in-mobile-browser/12088/14 "2022-08-10T07:47:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Qugurun](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/qugurun/32/5132_2.png) [@Qugurun](https://phaser.discourse.group/u/Qugurun)\
**Post date:** [August 10, 2022, 9:54am UTC](https://phaser.discourse.group/t/responsive-game-size-in-mobile-browser/12088/15 "2022-08-10T09:54:36Z")

</div>

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

> <https://github.com/Qugurun/qugurun.github.io/blob/main/phaser3/scale/src/lib/appScale.js#L23>

---

<div class="post-metadata">

**Author:** ![Daniil861](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/daniil861/32/6796_2.png) [@Daniil861](https://phaser.discourse.group/u/Daniil861)\
**Post date:** [August 10, 2022, 10:15am UTC](https://phaser.discourse.group/t/responsive-game-size-in-mobile-browser/12088/16 "2022-08-10T10:15:12Z")

</div>

> [@Qugurun](#):
>
> In line 23, the number 400 indicates the minimum height to which the camera zooms.

Ok, thanks!

---

<div class="post-metadata">

**Author:** ![Daniil861](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/daniil861/32/6796_2.png) [@Daniil861](https://phaser.discourse.group/u/Daniil861)\
**Post date:** [August 13, 2022, 8:11pm UTC](https://phaser.discourse.group/t/responsive-game-size-in-mobile-browser/12088/17 "2022-08-13T20:11:46Z")

</div>

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

```javascript
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:

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/7/7886a4ef1df3b40011ae4572f4b0464a97f7dfbf.jpeg)

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

---

<div class="post-metadata">

**Author:** ![Qugurun](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/qugurun/32/5132_2.png) [@Qugurun](https://phaser.discourse.group/u/Qugurun)\
**Post date:** [August 14, 2022, 1:28am UTC](https://phaser.discourse.group/t/responsive-game-size-in-mobile-browser/12088/18 "2022-08-14T01:28:17Z")

</div>

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

```javascript
        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](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/6/616f5c4c8cd100278250a8829ef5f6fddf46f1c0.gif)

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

---

<div class="post-metadata">

**Author:** ![Daniil861](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/daniil861/32/6796_2.png) [@Daniil861](https://phaser.discourse.group/u/Daniil861)\
**Post date:** [August 14, 2022, 7:41pm UTC](https://phaser.discourse.group/t/responsive-game-size-in-mobile-browser/12088/19 "2022-08-14T19:41:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Qugurun](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/qugurun/32/5132_2.png) [@Qugurun](https://phaser.discourse.group/u/Qugurun)\
**Post date:** [February 12, 2024, 5:02pm UTC](https://phaser.discourse.group/t/responsive-game-size-in-mobile-browser/12088/20 "2024-02-12T17:02:34Z")

</div>

[https://qugurun.github.io/phaser3/adaptive/index.html](https://qugurun.github.io/phaser3/adaptive/index.html)

> <https://github.com/Qugurun/qugurun.github.io/blob/main/phaser3/adaptive/engine/boot.js#L66>

I came up with a new way, and I think it’s much more successful and correct than what I did with the camera.

[Next page](https://phaser.discourse.group/t/responsive-game-size-in-mobile-browser/12088.md?page=2)