# How to fit screen to visible window on mobile devices?

**URL:** <https://phaser.discourse.group/t/how-to-fit-screen-to-visible-window-on-mobile-devices/6313>\
**Category:** Phaser 3\
**Created:** [May 13, 2020, 4:41am UTC](https://phaser.discourse.group/t/how-to-fit-screen-to-visible-window-on-mobile-devices/6313 "2020-05-13T04:41:36Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jaysama](https://avatars.discourse-cdn.com/v4/letter/j/7ba0ec/32.png) [@jaysama](https://phaser.discourse.group/u/jaysama)\
**Post date:** [May 13, 2020, 4:41am UTC](https://phaser.discourse.group/t/how-to-fit-screen-to-visible-window-on-mobile-devices/6313/1 "2020-05-13T04:41:36Z")

</div>

I’m using `HEIGHT_CONTROLS_WIDTH` on my game, which is primarily targeted to mobile devices, and I use camera height to determine the position of my game objects.

However, some browsers like Safari has bottom interface that caused my game to be cropped (see image below)

![Capture](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/d/dd705b39a80862ccc0c376fa01a1e6475f54abaf.png)  
How can I actually scale the screen to fit the visible window size for ALL kinds of browsers?

---

<div class="post-metadata">

**Author:** ![ThiagoRodrigues](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thiagorodrigues/32/3322_2.png) [@ThiagoRodrigues](https://phaser.discourse.group/u/ThiagoRodrigues)\
**Post date:** [May 13, 2020, 7:07am UTC](https://phaser.discourse.group/t/how-to-fit-screen-to-visible-window-on-mobile-devices/6313/2 "2020-05-13T07:07:55Z")

</div>

Would viewport works for you?

> **[Using the viewport meta tag to control layout on mobile browsers](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)**
>
> The browser's viewport is the area of the window in which web content can be seen. This is often not the same size as the rendered page, in which case the browser provides scrollbars for the user to scroll around and access all the content.

---

<div class="post-metadata">

**Author:** ![jaysama](https://avatars.discourse-cdn.com/v4/letter/j/7ba0ec/32.png) [@jaysama](https://phaser.discourse.group/u/jaysama)\
**Post date:** [August 31, 2020, 4:49am UTC](https://phaser.discourse.group/t/how-to-fit-screen-to-visible-window-on-mobile-devices/6313/3 "2020-08-31T04:49:46Z")

</div>

The solution for this can be found here:

> **[The trick to viewport units on mobile | CSS-Tricks](https://css-tricks.com/the-trick-to-viewport-units-on-mobile/)**
>
> Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their own