Hide address bar in mobile device browser

Question

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.

In mobile devices like iphone and android, the address bar takes up a lot space, space we can instead use for our page. — Prabhat, May 02 '11 at 10:20
@Pekka — mobile Safari (although I think it may not work in the latest version) — Quentin, May 02 '11 at 11:16
It works on current iOS (5.1 [9B179]) running on 4s, tested 24/4/2012 — dakine, Apr 23 '12 at 23:50

score 18 · Accepted Answer · edited Feb 15 '12 at 10:25

18

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; }

edited Feb 15 '12 at 10:25

Christian

27,509
17
111
155

answered May 02 '11 at 11:16

Tom Claus

1,301
1
9
13

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. – Prabhat May 02 '11 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. – Tom Claus May 02 '11 at 18:19
3

This actually helped. I am currently setting min-height by getting viewport height of the screen and adding 60px to it. – Prabhat May 06 '11 at 03:16
I tried this. This works very well with portrait mode but not in landscape mode with adroid chrome 33. – sonam Mar 13 '14 at 11:52

score 15 · Answer 2 · answered May 02 '11 at 10:58

15

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.

answered May 02 '11 at 10:58

sanderd

809
4
21

Indeed, definitely not the solution if you just want people to go to your application url and use it right away. – sanderd May 02 '11 at 11:30

score 1 · Answer 3 · answered Jun 19 '13 at 15:41

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.

score -1 · Answer 4 · edited Dec 20 '12 at 07:36

-1

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

edited Dec 20 '12 at 07:36

akjoshi

15,374
13
103
121

answered Dec 20 '12 at 07:14

Amir

1

Hide address bar in mobile device browser

4 Answers4

Linked