HTML5 Full Screen Web Apps: No browser bars

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

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

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.