Working on a browser game. When I test the fullscreen mode on my phone’s browser, the top of the screen is covered by an empty, black version of the Android status bar. Any known fix? Thanks.
Sounds like your phone perhaps has a camera notch/hole and that this area is excluded even when in fullscreen? I wonder if there’s some css or meta tag that needs to be set?
1 Like
Thanks for answering. The game covers the entire screen when I install it and run it as an APK. The problem only appears when I run it on the browser as an HTML5 bundle.
To make sure It wasn’t a problem with my browser, I tested several defold-made browser games on poki. They all cover the entire screen just fine.
I noticed that Poki has:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui, shrink-to-fit=no viewport-fit=cover">
While the default engine_template.html has:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui, shrink-to-fit=no">
I bet that viewport-fit=cover is the solution. The css equivalent is described as “The viewport is scaled to fill the device display. It is highly recommended to make use of the safe area inset variables to ensure that important content doesn’t end up outside the display.”
You could maybe try and copy and modify the engine_template.html and use your copy in game.project?
2 Likes
That worked perfectly. Thank you so much! I love this engine 
Great! I wonder if we should make this default? @AGulev your opinion?
Yes, I think it should be by default