Get a free trial // 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:

    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


    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed