HTML5 on mobile - how to go full screen

dawidM

Member
Hello guys,

I have a very frustrating problem. When I export my game to HTML 5, it cannot go fullscreen. It is especially annoying on mobiles because there are no options to go fullscreen manually, and the URL bar takes so much space on the screen. I will be grateful for some hint on how to fix it.

P.S.
I was thinking about buying Mobility Engine created by @True Valhalla but since his games also have this annoying bar, I am not sure if his engine helps. Also, I started to worry that it is hard to achieve.
 
Hello guys,

I have a very frustrating problem. When I export my game to HTML 5, it cannot go fullscreen. It is especially annoying on mobiles because there are no options to go fullscreen manually, and the URL bar takes so much space on the screen. I will be grateful for some hint on how to fix it.

P.S.
I was thinking about buying Mobility Engine created by @True Valhalla but since his games also have this annoying bar, I am not sure if his engine helps. Also, I started to worry that it is hard to achieve.
I use the Mobility Engine in my HTML5 games (https://fiatgames.us) since 2013 and have no complaints. Some hints: If you add the game to your home-screen (in Google Chrome) your game will run full-screen with no "annoying" browser bar. Also, I'm pretty sure you can swipe up/down outside of the canvas to hide/show it respectively... but honestly, I think that the average Joe/Jane would be more annoyed if the browser bar wasn't there. ¯\_(ツ)_/¯
 
Last edited:

True Valhalla

Full-Time Developer
GMC Elder
I was thinking about buying Mobility Engine created by @True Valhalla but since his games also have this annoying bar, I am not sure if his engine helps. Also, I started to worry that it is hard to achieve.
Unfortunately, the majority of browser UI can not be dismissed - the Mobility Engine does dismiss certain UI elements but it's not possible to dismiss everything. If you want to follow Aden's suggestion above, you can prompt users to install the game on their homescreen and provide instructions, but that's more likely to drive players away than anything. It's not worth it.

Given this limitation, it makes more sense to develop your games in portrait orientation. In landscape, the browser UI takes up far too much space especially on the vertical axis. This is one of the caveats of working with HTML5 but it is possible to adapt.
 
Unfortunately, the majority of browser UI can not be dismissed - the Mobility Engine does dismiss certain UI elements but it's not possible to dismiss everything. If you want to follow Aden's suggestion above, you can prompt users to install the game on their homescreen and provide instructions, but that's more likely to drive players away than anything. It's not worth it.

Given this limitation, it makes more sense to develop your games in portrait orientation. In landscape, the browser UI takes up far too much space especially on the vertical axis. This is one of the caveats of working with HTML5 but it is possible to adapt.
@dawidM As a band-aid you can change the color of the browser bar to make it less of an eye-sore. I did this in Space Breakers.

Code:
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">
P.S.
I was thinking about buying Mobility Engine created by @True Valhalla but since his games also have this annoying bar, I am not sure if his engine helps. Also, I started to worry that it is hard to achieve.
The Mobility Engine is the most reliable software I've ever bought. I purchased a license 7 years ago and @True Valhalla hasn't missed a beat keeping up with the latest changes to web standards. HTML5 optimization is something I never have to worry about. :D
 
Last edited:
Top