How to hide address bar using Ratchet?

Question

I'm using the Ratchet framework to serve my mobile pages.

I've tried various conventional methods to hide the address bar via Javascript (these can be easily found via Google) but still to no avail.

What I aim is for the address bar to hide normally - i.e. when the user scrolls down - as how any other mobile web page would function.

Anyone has a hack around this?

Answer 1

The short answer is that you can't hide the address bar using JavaScript because that would present a security risk in the browser.

The reason why the address bar won't disappear on scroll is because Ratchet fixes the body and enables scrolling on .content. See the basic template example at goratchet.com for more information.

The simplest way to hide the address bar is to get your users to add your site to their home screen and add the correct tags to your header. There's a primer for Android available from Google here and from Apple for mobile Safari here. You could also compile your app using Cordova.

Answer 2

If you are including bootstrap I add the sr-only to the class. This will hide the bar. Might work for you.