Grow your CSS skills. Land your dream job.

Hide ios Safari search/URL bar?

  • # February 15, 2013 at 12:29 am

    Hello everyone,

    For those of you using ios Safari…I’m curious if there is a standard method for hiding the search/url bar for websites added to the home screen.

    Here is an example:
    http://blog.mengto.com/

    Access this site after adding it to the homescreen, you will notice that the url/search bar is hidden.

    Any help is appreciated. Thanks

    # February 15, 2013 at 8:21 am

    @crocodillon

    Thank you. I was hoping it could be accomplished with a simple meta tag. Awesome!

    # February 15, 2013 at 8:38 am

    You’re welcome :)

    # February 15, 2013 at 12:44 pm

    Just remember to keep in mind that hiding default behaviour isn’t always the best.

    # February 16, 2013 at 11:27 am

    You have to options here. The meta tag posted above really hides it so your page look likes an app. If its not a web-app, I wont do this. Instead, try this:

    window.addEventListener( “load”, function () {
    setTimeout( function () {
    window.scrollTo( 0, 1 );
    }, 0 );
    });

    That way, the user still can scroll to the top to access the addressbar.

    # February 16, 2013 at 12:07 pm

    I see this version of that funcionality a lot. Why do you need a timeout if you give a delay of 0ms anyway? Scrolling to (0, 0) works too by the way, without cutting a row of pixels of. You might wanna check for window.scrollY… and bind to ‘orientationchange’ too :)

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".