How do I hide the address bar on iPhone?

Question

How do I hide the address bar on iPhone?

I tried two different methods so far:

• The scroll down one pixel trick with JavaScript on page load

Answer 1

Try:

setTimeout(function () {
  window.scrollTo(0, 1);
}, 1000);

If using jQuery, put it at the end of $(document).ready();. The time-out allows for the browser to determine the height of the page...

Answer 2

<meta name="apple-mobile-web-app-capable" content="yes" />

iPhone Configuring Web Applications

Answer 3

In case none of these solutions work and you are running into the very narrow issue that I faced, here's what fixed it for me.

I had this in my CSS

html{position: relative; height: 100%; overflow: hidden;}

This css applies a fix to one of my pages only, so I restricted it with a condition to that page, and the address bar is now behaving correctly on all other pages.

Answer 4

I think it will never be solved unless the content is more than the browser window.

Here is some code that will hide the URL on load, on orientation change, and on a touchstart (the touchstart should only be used if you have a persistent hidden URL, which is a whole other can of worms - if you don't, remove that part of the script).

if( !window.location.hash && window.addEventListener ){
    window.addEventListener("load", function() {
        setTimeout(function(){
            window.scrollTo(0, 0);
        }, 0);
    });
    window.addEventListener( "orientationchange",function() {
        setTimeout(function(){
            window.scrollTo(0, 0);
        }, 0);
    });
    window.addEventListener( "touchstart",function() {
         setTimeout(function(){
             window.scrollTo(0, 0);
         }, 0);
     });
}

Answer 5

I think this version is actually better. It tests to see if the user has already begun scrolling, which is an issue I noticed in my mobile project.

/Mobile/.test(navigator.userAgent) && !location.hash && setTimeout(function () {
    if (!pageYOffset) window.scrollTo(0, 1);
}, 1000);

Answer 6

You can run the function when the site content is ready instead of using timeout

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