HTML5 Full Screen Web Apps: No browser bars

Question

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

Answer 1

<script> function requestFullScreen() {

  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);

  } else if (typeof window.ActiveXObject !== "undefined") {

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

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


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

Answer 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:

• Removing address bar from browser (to view on Android)
• Fullscreen Web App for Android

And these tutorials:

• Full Screen Web Apps
• Best Practices for Web Apps

Answer 3

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

Answer 4

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:

<meta name="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.

Answer 5

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".

Answer 6

EDIT

New answer

Much has change since this question was asked. There now is good native support for scrolling, fixed position, and the browser bar of most OS is a lot smaller then back then. Since this is the case I would advice not to resort to scrolling hacks as most sites and answers recommend. Sticking to the rules of the OS will improve the stability, usability and future compatibility of your webapp.

Old answer

It's possible for iPhone when somebody saves it as a webapp to the homescreen. This works if you add the proper meta tags.

For the standard browsermode it's a bit trickier you have to fallback to hacks. Basically the address bar disappears when you scroll (for Iphone and most of the times for android). You can fake this with javascript. Mobile tuts also has a good article on it: http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/, but this only works when content is longer the screen resolution.