13

Old trick with window.scrollTo(0,1); doesn't work. And even worse, the address bar moves only a bit and gets stuck halfway out sometimes.

firedev
  • 19,222
  • 18
  • 58
  • 91

4 Answers4

29

It is a combination of many things as I have found when researching this issue for myself. Here's the code that properly works on iOS5: (I know I'm a little late, but an answer is an answer, hopefully it can help people in the future)

<!DOCTYPE html>
<html>
<head>
<title>Hide Address Bar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
 window.addEventListener("load",function() {
   setTimeout(function(){
    window.scrollTo(0, 0);
    }, 0);
 });
</script>
<style>
 body { min-height: 480px; }
</style>
</head>
<body>
 <h1>Content</h1>
</body>
</html>

Source: http://24ways.org/2011/raising-the-bar-on-mobile

Example: http://jsbin.com/isenax/

Jon Dolan
  • 391
  • 3
  • 5
  • 1
    For the new iPhone 5 display you'll have to bump the min-height up a bit. My experience showed 505px to be enough. Depending on your application you might want to set this dynamically depending on the user's device. – Sean Nov 09 '12 at 00:40
  • 3
    Instead of specifying the height in the CSS style, you can also add an additional entry in the viewport meta-tag. You can specify height=device-height. This way, the bar will still be hidden even if you change the orientation of the device. – Silver Gonzales Mar 28 '13 at 14:57
13

i guess the code should still work..

anyways here is the correct way to tell mobile safari that you want the full screen: click me

e.g. use

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

EDIT

Apple uses a new mobile-ui property to display a minimal UI in safari:

A property, minimal-ui, has been added for the viewport meta tag key that allows minimizing the top and bottom bars on the iPhone as the page loads. While on a page using minimal-ui, tapping the top bar brings the bars back. Tapping back in the content dismisses them again.

use it like this:

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

source: https://www.perpetual-beta.org/weblog/ios-7-dot-1-mobile-safari-minimal-ui.html

Gotschi
  • 3,147
  • 2
  • 22
  • 21
  • 1
    Tried all the meta tags, I need the old behaviour that can hide the address bar after the page is loaded without adding it page to the home screen. – firedev Oct 25 '11 at 17:05
  • In my situation the change only worked, after i put the app on the homescreen again. – speznaz Nov 10 '11 at 09:25
  • 3
    I want it to work without adding the app on the homescreen, that's the thing. – firedev Dec 01 '11 at 05:16
  • If your page doesn't fill the full height of the browser, the address bar won't hide. Try setting "height: 100%" on something. – ReactiveRaven Feb 24 '12 at 09:43
5

Since IOS7 the window.scrollTo trick doesn't work anymore. There is no work around for the moment except to invite the user to add your website to Home Screen.

http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

Is it possible to hide the address bar in iOS 7 Safari?

Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch

Community
  • 1
  • 1
svassr
  • 5,260
  • 5
  • 42
  • 63
1

On iOS 7 you can use the minimal-ui meta tag. Unfortunately, that was removed in iOS 8.

For iOS 8 there's a project called brim that is supposed to bring back the minimal-ui type functionality. It can be found here: https://github.com/gajus/brim

Clayton Gulick
  • 8,307
  • 2
  • 32
  • 26