Phaser 3 - How to get actual screen size on HEIGHT_CONTROLS_WIDTH?

Question

I'm making a game primarily targeted to mobile devices on Phaser 3 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 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?

Answer 1

Try this:

this.canvas.getBoundingClientRect();

It should give you the info you need about your canvas.