开发者

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

开发者 https://www.devze.com 2023-01-21 08:38 出处:网络
I want to hide address bar and status bar in iphone because of more sp开发者_运维问答ace. I tried this code window.scrollTo(0, 1); but this is not working in iphone. Please help me. Thanks in advance.

I want to hide address bar and status bar in iphone because of more sp开发者_运维问答ace. I tried this code window.scrollTo(0, 1); but this is not working in iphone. Please help me. Thanks in advance.


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

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


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.


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.. :)


Try something like

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

This should hide the address bar.


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.


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">
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号