Html5 Full Screen Web Apps: No Browser Bars

June 25, 2024 Post a Comment

I am creating a HTML5 web app for mobile devices and was asked to hide the browser nav bar (the back & forward buttons) (typo here prev.). How can I achieve that? I think I sh

Solution 1:

I know this question is a bit out of date at this point so here is an update:

On Safari for iOS 7+ this solution is great:

<metaname="viewport"content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

The minimal-ui attribute makes the browser hide all the buttons while keeping the taskbar intact.

I have not tested this for android.

Solution 2:

If you can use JQuery in your web-app than I would suggest you to go for NiceScroll plugin.

It can be used for both mobile and desktop browsers and will hide the browser's scrollbars. If your code is going beyond the viewport height of browser than it will make a custom scrollbar which will fadeout if not in use.

Here is its Demo.

Edit: As per your update, I would like to add that I am actually not a native mobile web-app developer but while searching for your problems I found some SO questions that can help you to lead the way further:

And these tutorials:

Solution 3:

You could use this application for Android: Kiosk Web/Html Browser, it creates a folder in your sd card where you can put the html, showed in fullscreen "immersive mode".

Solution 4:

<script>functionrequestFullScreen() {

  var el = document.body;

  // Supports most browsers and their versions.var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen 
  || el.mozRequestFullScreen || el.msRequestFullScreen;

  if (requestMethod) {

    // Native full screen.
    requestMethod.call(el);

  } elseif (typeofwindow.ActiveXObject !== "undefined") {

    // Older IE.var wscript = newActiveXObject("WScript.Shell");

    if (wscript !== null) {
      wscript.SendKeys("{F11}");
    }
  }
}


</script><ahref="#"onClick="requestFullScreen();"> click </a>

Solution 5:

There's such function in the latest Chrome for Android beta: https://developers.google.com/chrome/mobile/docs/installtohomescreen

Build Html5