20

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 should be able to achieve that using Phone Gap. But I wonder if its possible for a "normal" web app to hide the browser bar? I think its possible if I pin the web site/app to the home screen?

iPhone has http://ajaxian.com/archives/iphone-full-screen-webapps, but what about Andriod at least?

Jiew Meng
  • 84,767
  • 185
  • 495
  • 805
  • Are you able to apply JQuery in your app? – Asif Jul 01 '12 at 09:20
  • There is a similar, more recent answer to this question found at https://stackoverflow.com/questions/24889100/ios-8-removed-minimal-ui-viewport-property-are-there-other-soft-fullscreen – TheScrappyDev Jan 01 '19 at 18:53

6 Answers6

14

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.

Sheldonbrax
  • 310
  • 2
  • 7
6

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:

Community
  • 1
  • 1
Asif
  • 4,980
  • 8
  • 38
  • 53
  • Ops, my bad, I mean the browser bar. The one with back & forward buttons – Jiew Meng Jul 01 '12 at 09:59
  • 1
    Are you taking about kind of "_Automatic F11 Script_"? – Asif Jul 01 '12 at 16:32
  • Oh, I just found out that that means automatically make the browser full screen ... hmm not quite actually. I think iPhone has a full screen web app thing http://ajaxian.com/archives/iphone-full-screen-webapps, but what about Andriod – Jiew Meng Jul 02 '12 at 13:31
  • @JiewMeng May be [this tutorial](http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/) will help you.. – Asif Jul 02 '12 at 14:36
2

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

fabiodipa
  • 55
  • 8
2
<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>
Cícero Alexandre Alves Lima
  • 21
  • 2
0

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.

Tosh
  • 1,789
  • 15
  • 20
0

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

Denes Papp
  • 3,835
  • 3
  • 32
  • 33