# How to get actual screen size on HEIGHT\_CONTROLS\_WIDTH?

**URL:** <https://phaser.discourse.group/t/how-to-get-actual-screen-size-on-height-controls-width/5639>\
**Category:** Phaser 3\
**Created:** [March 26, 2020, 5:14am UTC](https://phaser.discourse.group/t/how-to-get-actual-screen-size-on-height-controls-width/5639 "2020-03-26T05:14:43Z")\
**Posts on this page:** 6\
**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:** [March 26, 2020, 5:14am UTC](https://phaser.discourse.group/t/how-to-get-actual-screen-size-on-height-controls-width/5639/1 "2020-03-26T05:14:43Z")

</div>

I’m making a game primarily targeted to mobile devices using scale mode HEIGHT\_CONTROLS\_WIDTH.  
With fixed height, I can just make the game on 3:4 aspect ratio and make it centered so it will automatically crop the sides for tall devices.

I’m following [this](https://phaser.io/examples/v3/view/scalemanager/height-controls-width) example.

However, now I have a problem: I can’t get the actual visible screen size.  
I have UI buttons located at the top left and top right of the game.  
But with the game cropped for tall devices, they’re not visible on those devices.  
I need to be able to get the visible screen size to anchor them on the correct position.

I have tried `this.cameras.main.width`, `window.innerWidth`, `window.outerWidth`, and many more but nothing works.  
Is there any way for me to get the actual visible screen size after getting cropped?

---

<div class="post-metadata">

**Author:** ![thenonamezz](https://avatars.discourse-cdn.com/v4/letter/t/d07c76/32.png) [@thenonamezz](https://phaser.discourse.group/u/thenonamezz)\
**Post date:** [March 26, 2020, 8:58am UTC](https://phaser.discourse.group/t/how-to-get-actual-screen-size-on-height-controls-width/5639/2 "2020-03-26T08:58:52Z")

</div>

rexrainbow has made a very good plugin to put objects based on the visible window: [https://rexrainbow.github.io/phaser3-rex-notes/docs/site/anchor/](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/anchor/)

---

<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:** [March 26, 2020, 9:18am UTC](https://phaser.discourse.group/t/how-to-get-actual-screen-size-on-height-controls-width/5639/3 "2020-03-26T09:18:47Z")

</div>

Exactly what I’m looking for.  
Thanks!

---

<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:** [March 26, 2020, 5:08pm UTC](https://phaser.discourse.group/t/how-to-get-actual-screen-size-on-height-controls-width/5639/4 "2020-03-26T17:08:54Z")

</div>

Sounds like `this.scale.parentSize.width`, `this.scale.parentSize.height`.

---

<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:** [March 27, 2020, 2:00am UTC](https://phaser.discourse.group/t/how-to-get-actual-screen-size-on-height-controls-width/5639/5 "2020-03-27T02:00:43Z")

</div>

@samme I tried them but didn’t work. They returned the actual canvas size instead of the visible size.  
Because the canvas size is actually the same, they’re just cropped on the sides and the overflow is hidden using css.  
Using rexrainbow’s plugin is the perfect solution for me.

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [March 27, 2020, 3:05am UTC](https://phaser.discourse.group/t/how-to-get-actual-screen-size-on-height-controls-width/5639/6 "2020-03-27T03:05:49Z")

</div>

[Here](https://github.com/rexrainbow/phaser3-rex-notes/blob/master/plugins/utils/system/GetViewport.js) is the source code of getting view-port, used in anchor plugin.