cssaddress-barmobile-chrome

Prevent autohide of address bar on mobile browsers

I am building a website that uses 100vh for each section. However on mobile browsers, this leads to a bad UI as the viewport height increases/decreases with hiding/displaying of the address bar (such as on Chrome). Is there any way to prevent the autohide of addressbar on scroll?

The Freelancer website has an implementation that fixes this. Could someone explain how this is done? https://m.freelancer.com

Solution

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