[Help] Available Screen Space

[rrnut]

I am new to Phaser and mobile.

As a learning exercise I am attempting to build a simple demo that renders a Phaser game object in the browser and draws a rectangle around the border of the available visible space. My goal is to make sure I understand how to determine the actual usable space. My game is going to use a board that fills one screen so I do not need (or want) any scrolling. I just want to determine the usable screen space so I can fill  it.

I have found numerous versions of this question on this forum and others and after trying many of the things discussed I am still not getting the result I am after.

Based on reading, I think I should be using window.innerWidth and window.innerHeight to get the dimensions I want.

On my desktops (using Chrome and Edge/IE) it works as expected.

On my tablets (iPad and Nexus) it works as expected for both portrait and landscape orientations.

On my iPhone (6) it works in portrait but when I turn it to landscape (and refresh the screen) the browser's navigation bar covers the bottom.

On my Android phone it works in landscape but when I turn it to portrait (and refresh the screen)  the browser's nav bar covers the bottom.

 

I have spent a couple days on this so now it's time to ask for help...

Is there a property I can use to get the actual usable space in the current browser or will there always need to be tweaking for specific devices?

Thanks for any suggestions,

DK

 

Edit:

So I added a check in the render function to watch for the screen size changing. When a size change is detected it rereads the window.innerHeight and window.innerWidth properties and then resizes the game accordingly. Doing this inside the render function appears to solve the problem. 

I am going to go with this for now. If anyone has any additional words of wisdom I am still open to suggestions.

Edited September 11, 2017 by rrnut
Additional information - possible solution

[mattstyles]

6 hours ago, rrnut said:

Doing this inside the render function appears to solve the problem. 

Does this solve it for iPhone? Because the toolbar (the bottom one) is a floating element that is not part of the viewport i.e. the window is behind it and JS has no way of knowing about it so all window size calculations (where you usually want viewable space) are wrong.

[rrnut]

It solves it as far as game play is concerned (I think). It turned out that some of my difficulty in determining the issue was related to how I was testing it.

1. I would load the page.

2. I would resize the browser (desktop) or change the orientation of the device (phone/tablet).

3. At this point, to get the game to update the stage, I was hitting refresh on the browser (rather than having the code detect and automatically redraw).

Turns out step three was the problem (due to what you mention above). In order to access the refresh button on the phone I had to activate the toolbar which then drew the floating element over top of my window. The reason this was working on the tablets and the desktops is that the refresh button was already visible. Nothing new got activated when I refreshed.

When I have the code detect the change and refresh itself, the floating element does not get activated. 

So, theoretically I think the only time the toolbar would be activated during game play is if the user purposely activates it to navigate away from the game. At that point it won't matter that the bottom of the stage is covered. (to anyone reading this, please feel free to point out errors in this assumption...)  

My plan is to design the game so that once you start a game, you are not allowed to change the screen orientation. If you do it will pause until the screen is set back to the original orientation. You can play a game in either orientation, you just need to start the game with your device in the desired orientation.

[mattstyles]

6 hours ago, rrnut said:

When I have the code detect the change and refresh itself, the floating element does not get activated. 

Ah, thats good.

I thought that Safari started with the toolbar visible and only scrolling down the body element (a full screen size child element wont work) dismisses it (and shrinks the top url bar stuff at the top). Chrome for iOS doesn't have this problem as whilst the app is just Safari under the hood it doesn't implement the same ui.

6 hours ago, rrnut said:

My plan is to design the game so that once you start a game, you are not allowed to change the screen orientation. If you do it will pause until the screen is set back to the original orientation. You can play a game in either orientation, you just need to start the game with your device in the desired orientation.

Yeah, as the browser can not lock the orientation this happens a lot as a solution. Pretty rubbish really but the best option given the alternatives!