Hide address bar and status bar in iphone using javascript and html

Question

I want to hide address bar and status bar in iphone because of more space. I tried this code window.scrollTo(0, 1); but this is not working in iphone. Please help me. Thanks in advance.

Answer 1

For hiding the title bar, you need a setTimeout() ( apparently ).

window.onload = function() {
    setTimeout(function() { window.scrollTo(0, 1) }, 100);
};

Answer 2

This is by far the most comprehensive post I have seen on this subject:

http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/

Go there, it explains everything and should cover any issues you may have, as just doing window.scrollTo(0, 0); is not enough in most cases.

Answer 3

This way works for me everytime...

Place the below script in the the header:

<!-- Remove Web Address Bar Cross Platform -->

<script type="text/javascript">
function hideAddressBar()
{
    if(!window.location.hash)
    {
        if(document.height < window.outerHeight)
        {
            document.body.style.height = (window.outerHeight + 50) + 'px';
        }

        setTimeout( function(){ window.scrollTo(0, 1); }, 50 );
    }
    }
window.addEventListener("load", function(){ if(!window.pageYOffset){ hideAddressBar(); } } );
window.addEventListener("orientationchange", hideAddressBar );
</script>

As far as I can tell, the combination of extra height added to the page and the scrollTo() statement make the address bar disappear.

Hope this helps.. :)

Answer 4

Do you need to do it in javascript? Personally, I'd just add a meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimal-ui">

Answer 5

Try something like

window.onload = function() {
    window.scrollTo(0, 0);
};

This should hide the address bar.

Answer 6

Try to put at the very end of the BODY tag a script with the scroll command.

<script>window.scrollTo(0,1)</script>

It works well in our app on both iPhone and android.