How do I hide the address bar on iPhone?

Question

How do I hide the address bar on iPhone?

I tried two different methods so far:

• The scroll down one pixel trick with JavaScript on page load

Answer 1

UPDATE: Apple removed support for minimal-ui in iOS 8 so this is no longer a useful answer :(

---

For new googlers looking into this: As of iOS 7.1 there's a new minimal-ui mode that works on mobile Safari:

It's enabled by setting the minimal-ui property on the viewport:

<meta name="viewport" content="minimal-ui">

You can also use it in conjunction with other properties like so:

<meta name="viewport" content="width=device-width, minimal-ui">

Of note, there's no minimum content length requirement as there is with the scrollTo hack. There's a great overview of this new mode here. (That's where the above image comes from.) He also lists some shortcomings.

The only official documentation I could find on this is a note in Apple's iOS 7.1 release notes:

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.

For example, use <meta name="viewport" content="width=1024, minimal-ui”>.

Of course, since this only works in iOS 7.1 and above, it's usefulness may be limited.

Answer 2

<meta charset="utf-8"><meta name="description" content="{MF_PLUGIN_SETTING:HOME_DESCRIPTION}"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"/><meta name="apple-mobile-web-app-capable" content="yes"><meta name="mobile-web-app-capable" content="yes"> 

This is used for adding a ios web app to the homescreen without the searchbar.

Answer 3

I have been searching around on this full screen web app as well and i found this.

http://www.onlywebpro.com/2015/07/19/optimizing-full-screen-mobile-web-app-for-ios/

1. Basically you need add the following in your header:

<meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1, maximum-scale = 1, user-scalable = no" />
    
//App name
<meta name="apple-mobile-web-app-title" content="App name" />

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

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

//APP ICONS 
<link rel="apple-touch-icon" href="/img/icon.png">

<link rel="apple-touch-icon" sizes="76x76" href="/img/icon.png">

<link rel="apple-touch-icon" sizes="120x120" href="/img/icon.png">

<link rel="apple-touch-icon" sizes="152x152" href="/img/icon.png">

2. Open the site in Safari
3. Tap on the "Open with" icon ( arrow pointing upwards and box below it) beside refresh button at the URL bar
4. Select "Add to home screen"
5. Go to the homescreen and open the "App name"
6. Voila! website with no URL bar or navigation buttons!

Answer 4

Unless something has changed in recent iOS versions, the scroll down trick is the only one that reliably works, I've had no issues with this version:

/mobile/i.test(navigator.userAgent) && !location.hash && setTimeout(function() {
  window.scrollTo(0, 1);
}, 1000);​

I didn't care about any other mobile platform for this particular page though, it was redirecting based on agent...you may want to change the regex to check for iPhone specifically, e.g. replace /mobile/ with /iPhone/.

Answer 5

I just hit this myself. If the address bar is not hiding, the reason may simply be the page is not long enough to scroll.

When the

window.scrollTo(0,1)

is called the page MUST be longer than the window so a scrolling event can occur.

Only when the scrolling even occurs will mobile safari hide the address bar.