Hide address bar in mobile device browser

Asked 2/5, 2011 at 10:17 Answered 19/6, 2013 at 15:41

Solved html css mobile-safari mobile-website

I know 1 way of doing this.

<body onload="setTimeout(function() {window.scrollTo(0, 1)}, 100)">
...
</body>

But this works only if the page is big enough to be scrolled. If the page fits the screen the above function wont work. How to hide the address bar in this case ? I need to get it to work with iphone, ipad, android devices.

Fullerton answered 2/5, 2011 at 10:17 Comment(4)

In what browser does this code hide the address bar? – Alltime 2/5, 2011 at 10:18

In mobile devices like iphone and android, the address bar takes up a lot space, space we can instead use for our page. – Fullerton 2/5, 2011 at 10:20

@Alltime — mobile Safari (although I think it may not work in the latest version) – Whistle 2/5, 2011 at 11:16

It works on current iOS (5.1 [9B179]) running on 4s, tested 24/4/2012 – Pascasia 23/4, 2012 at 23:50

Maybe you can set the minheight on the body bigger. 480px screen height in vertical mode + 60px address bar height = 540px.

Example:

body { min-height:540px; }     
body[orient="portrait"] { min-height:540px; }
body[orient="landscape"] { min-height:400px; }

Urias answered 2/5, 2011 at 11:16 Comment(4)

Thats a good idea. But setting min height may be an issue. Since I am accessing the page from iPad as well. If I set min height a little more than iPad's height, we would have a big scroll view for iPhone. – Fullerton 2/5, 2011 at 11:39

I'm not sure, but i think it is not possible to hide the address bar on the iPad. so you can just set it the the iPhone min-height. – Urias 2/5, 2011 at 18:19

This actually helped. I am currently setting min-height by getting viewport height of the screen and adding 60px to it. – Fullerton 6/5, 2011 at 3:16

I tried this. This works very well with portrait mode but not in landscape mode with adroid chrome 33. – Macaroon 13/3, 2014 at 11:52

iPhone:

Works only if the mobile "app" is added to the homescreen (through the plus-icon -> add to homescreen)

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

I have no experience with other mobile OS'es, but a quick Google-search for hide browser url bar android resulted in a similar solution to yours, with a window.scrollTo.

Hermit answered 2/5, 2011 at 10:58 Comment(1)

Indeed, definitely not the solution if you just want people to go to your application url and use it right away. – Hermit 2/5, 2011 at 11:30

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

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); 
        document.body.style.height = 'auto'; 
      }, 50 );
  }
}

A bit modified

works quite well in some browsers, but at least I cannot get it to work Android Chrome.

Casia answered 19/6, 2013 at 15:41 Comment(0)

-1

Just Add 'BR' at the end of the page. or you can use the jqueryUI with the div height 100%

Pinochle answered 20/12, 2012 at 7:14 Comment(0)

Recommended topics

Hot tags