CODEWITHSUNDEEP
mobilescroll
Artanis
Artanis

Reputation: 1005

Hide address/navigation bar on mobile browsers without the need to scroll content?

For some time I've been making and maintaining a web-app, that has full-screen single page design, and shows lists of items in separate containers, so there is no classic scroll behavior that would normally trigger address and navigation bar to be hidden on mobile browsers like Safari and Chrome. So, as a result, the top address bar and the bottom navigation bar is visible all the time when using this web app on smartphone browsers. It's not a big issue on large 5+ inch phones, but those few hundred pixels makes a lot of difference when an app is used on smaller devices like iPhone SE, for example.

For some time I thought this is an unavoidable issue, and just put up with it, but recently I saw someone using Google Maps web version on Chrome in iOS, and upon tapping on some address, navigation bar and address bar went away, and it looked like a real full-screen app. So it means there is a way to simulate a scroll-type event that will make mobile browsers to hide navigation bars.

Any ideas/experience on how to do this?

Upvotes: 7

Views: 2913

Answers (1)

Anthony Schanen
Anthony Schanen

Reputation: 96

Instead of hiding the address bar have you tried just going fullscreen? I know Chrome Firefox and other browsers support this and it will achieve what you're trying to do, just in a different way. I'm not sure if safari has something similar.

I think forcing "fullscreen mode" when the user encounters the page might be an option, as detailed here:

https://developers.google.com/web/fundamentals/native-hardware/fullscreen/

This doesn't require scrolling to initiate the address bar from disappearing but it may require the user to enable fullscreen from a prompt using requestFullscreen()

Just an idea, hope this helped a little if at all.

Upvotes: 2

Related Questions