Hi there, I’ve made a small game that I want to take up the entire height of the viewport, but there are some mobile browsers such as chrome that consider the viewport to include the space behind the address bar. What this results in is the top of my game being behind the address bar or if I try to account for the address bar, it isn’t the full height when the address bar isn’t considered part of the viewport.
The best solution I’ve found is the fullscreen API, but I believe it sends out a request that can be rejected by the user. So my question is how should I handle the rejection situation gracefully? It will leave the game partially behind the toolbar again which isn’t satisfactory and I’m back to square 1.
Any advice owuld be appreciated.
This might be useful: when fullscreen is enabled, then document.fullScreenElement will be non-null. You can query this in an event handler for the fullscreenchange event (on the element being fullscreened), and adjust the document accordingly.
Thanks for your response. Please correct me if I’m wrong, because I’ve never used fullscreen API before, but I understand document.fullScreenElement’s purpose to be determining whether or not the user is in fullscreen mode. If that is the case, then my issue isn’t detecting whether or not they are in fullscreen, but deciding how to handle the top of my game being back behind the address bar when they have rejected the request. Thanks again.
I’ve not used the fullscreen API either, but it appears from reading the documentation on requestFullScreen that it’s even simpler than what I said above: the promise returned by requestFullScreen should be rejected if the user rejected the fullscreen request. Try the example code on this page to see if that’s the case
1 Like
I just realised my use of the word handle in the title may have been a bit misleading due to its usual connotations with event handling. It’s not an issue of not knowing how to respond to a rejection, but an issue of not knowing what actions I want to respond to the rejection with, in order to resolve the original issue.
The only reason I want to use the fullscreen API is to avoid the game clipping behind the address bar, but if they reject the fullscreen request then my only solution is gone and its back behind the address bar again.
Ah, sorry for misunderstanding the problem. The game being behind the address bar sounds unusual to me – do you have negative margins causing it to push up above the normal document boundaries? If not, only thing I can recommend would be to add a spacer element before everything else that pushes the content down.
Perhaps if you pasted your HTML and CSS (or a link to the repo), it might shed more light on the problem.
Here is the live demo and repo. I believe the behaivor causing the problems is described here, but I odn’t know what to do about it 
It should appear as 100% of viewport but on chrome android it is stretched behind the address bar.
Ah, this is probably related to the vh problem in mobile browsers. The gist is that you can’t get rid of the address bar (or the navigation bar in IOS), but it still counts as part of the viewport height. Far as I know, they all behave like IOS now. I believe there are some JS and pure CSS fixes for the problem, but you may have to google around to find the best one (something like “mobile viewport height fix”)
1 Like
I have a fix now which is abandon vh because google and apple have rendered them useless . Thanks for your help!