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 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?

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

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