Prevent Address-Bar Hiding in Mobile Browsers

Prevent autohide of address bar on mobile browsers

Is there any way to prevent the autohide of addressbar on scroll?

Unfortunately, there is no way to pin the address bar from HTML or code (that I know of, at least).

"Fake" fullscreen mode:

Instead, you could consider forcing the address-bar to auto-hide when the page loads, to give a nicer full-screen experience.

Obviously, this will only apply when first loading the page and scrolling down - back up again, it will show the address bar.

I tend to find that most mobile-designed sites require the user to scroll down a lot, and then navigate to another page anyway.

Here's how:

Write a simple script and use it in the page(s) you wish to have as "full-screen" - or if you have a template page which the rest of your site uses, use the script in that.

You can use:

<script type="text/javascript">
    window.onLoad = function() {        
        window.scrollTo(0,1);
    }
</script>

Or if you're using jQuery:

<script type="text/javascript">
    $(function() {
        $(window).scrollTo(0,1);
    }
</script>

This "tricks" the browser into thinking that you've already scrolled when the page loads, and therefore auto-hides the address bar. This may/may not work on certain browsers.

Again - this is not a direct answer to "preventing autohide of addressbar on scroll", but this may enhance your users' experience when first visiting pages.

I used: http://www.html5rocks.com/en/mobile/fullscreen/ as a reference - by the looks of it, there are plenty more other ideas, too.

Hope this helps! :)

UPDATE:

I've done a lot more digging on this subject, and there also appears to be other ways that you can force the browser into being "full-screen", and also to prevent the address bar from re-appearing when scrolling "up".

See here: http://www.creativebloq.com/html5/12-html5-tricks-mobile-81412803 for some (plenty of) suggestions.

Disable hiding of address bar on mobile

You can wrap your HTML with div and do something like this: http://jsfiddle.net/DerekL/Fhe2x/show

$("html, body, #wrapper").css({
    height: $(window).height()
});

It works on Android and iOS.

Related Topics