Hiding the iPhone URL bar

It’s a common practice to hide the URL bar for iOS and android devices. The reason for this is pretty straight forward: it takes up screen real estate.

An iPhone with the URL bar visible.

This is one very common approach that’s being used now:

addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
  function hideURLbar(){
  window.scrollTo(0,1);
}

The above javascript simply scrolls the page to the top and in the process the iOS URL bar is scrolled off of the screen after the page loads. This works great, but it has a big usability problem that I ran into this weekend after some mobile web browsing over 2g. Namely, if you’ve loaded up a page that uses this function, and you then begin scrolling down the page to read or browse through the loaded content, you’re abruptly taken back to the top of the page when the function fires.

I’ve noticed this behavior on sites like TechCrunch and engadget, and it’s really annoying. I’m guilty myself of adding this code to websites myself, but will be avoiding it in the future. This isn’t something you would need to worry about if you load all of the content after the JS executes, but unfortunately that’s generally not the quickest way to load the page. I’d be interested in hearing any solutions to this problem, but for now I’ll just have to be content with a URL bar.

Leave a Reply

Your email address will not be published. Required fields are marked *