How do I hide the address bar on iPhone?

Question

I tried two different methods so far:

The scroll down one pixel trick with JavaScript on page load

And the following meta tags:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /><meta name="apple-mobile-web-app-capable" content="yes" />

Also this:

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

I am completely confused.

PS: Oh, I forgot a really important thing: the web page itself does not overflow the browser window. It probably is the reason why the 1 pixel scrolldown trick does not work.

I can't make it bigger, since the hit thing about the design, that everyone can scroll, but this page folds... :)

If the page doesn't overflow the browser viewport, why don't you make the page body a little higher, scroll to 0,1 to hide the address bar and then disable scrolling? — Rengers, Nov 07 '10 at 19:07
These metatags only have an effect if the app was launched via a bookmark on the home screen. More info: https://developer.apple.com/library/safari/codinghowtos/Mobile/UserExperience/_index.html — xentek, Sep 23 '13 at 21:48
See also https://stackoverflow.com/questions/37395561/how-to-hide-a-mobile-browsers-address-bar — rogerdpack, Oct 28 '18 at 04:54
The example of above should use the 'name' attribute, instead of 'names'. — Bob, Jan 19 '21 at 00:00

score 85 · Accepted Answer · edited Apr 23 '18 at 18:48

85

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.

edited Apr 23 '18 at 18:48

Peter Mortensen

30,738
21
105
131

answered Sep 20 '11 at 15:01

rob

8,134
8
58
68

This should have more up-votes, you're absolutely spot on about page height. Can't scroll if there's nothing there! – iamkeir Apr 16 '12 at 12:30
To make it the right height, see: http://stackoverflow.com/questions/5206811/hide-iphone-address-bar-with-100-height – poshaughnessy Jun 05 '13 at 14:37
Was searching for 'hiding address bar' not working, but instead, this solved my problem of 'width=device_width' not working. +1 for that. – Ganesh Jadhav Sep 11 '13 at 11:53
8

This does not work in my current version of Chrome or Safari. – swade Jul 06 '16 at 17:16
You're a genius man, and you just saved my ass. @StevenWade You need to wrap this call in a timeout, as described in a discussion [here](https://github.com/alvarotrigo/fullPage.js/issues/2414). Try experimenting with different values (200, 500, 1000, etc.). – Alex Dec 15 '17 at 18:03
11

Still can't make it work. View port scroll but address bar wont hide. Tried played with timeout, pixels to scroll but nothing help. Still work for iOS11.4 for you? This is live example, code is before body. Thank you for help. https://vesmir.pigy.cz/list.php?p=hraj&t=pexeso – tom52 Jun 13 '18 at 08:51

score 11 · Answer 2 · edited May 20 '21 at 13:00

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:

minimal-ui

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.

This sounds really good until you realise [it is removed in iOS 8](http://stackoverflow.com/q/24889100/1676444) :( On the linked question, [Gajus explains an alternative to `minimal-ui`](http://stackoverflow.com/a/26884561/1676444) which may help some people. — Turnerj, Sep 03 '15 at 01:39

score 10 · Answer 3 · answered Nov 07 '10 at 10:52

10

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/.

answered Nov 07 '10 at 10:52

Nick Craver

623,446
136
1,297
1,155

This is gonna be an iphone only microsite. Thanks for the advice Nick, gonna try it ;-) – Peter Szabo Nov 07 '10 at 11:08
Nope, still no effect. But I think, I am doing something wrong. I attached the code you just gave me, to onload, with jquery: – Peter Szabo Nov 07 '10 at 11:17

score 5 · Answer 4 · answered May 27 '11 at 07:26

I think this version is actually better. It tests to see if the user has already begun scrolling, which is an issue I noticed in my mobile project.

/Mobile/.test(navigator.userAgent) && !location.hash && setTimeout(function () {
    if (!pageYOffset) window.scrollTo(0, 1);
}, 1000);

score 3 · Answer 5 · answered Jan 05 '12 at 16:17

3

You can run the function when the site content is ready instead of using timeout

addEventListener("load", function() {
    window.scrollTo(1, 0);
}, false);

answered Jan 05 '12 at 16:17

herson

31
1

score 2 · Answer 6 · edited Aug 10 '18 at 18:19

2

In case none of these solutions work and you are running into the very narrow issue that I faced, here's what fixed it for me.

I had this in my CSS

html{position: relative; height: 100%; overflow: hidden;}

This css applies a fix to one of my pages only, so I restricted it with a condition to that page, and the address bar is now behaving correctly on all other pages.

edited Aug 10 '18 at 18:19

David

3,285
1
37
54

answered Nov 20 '17 at 19:37

Mo Alsaedi

709
3
15

score 2 · Answer 7 · edited Apr 23 '18 at 18:50

2

Try:

setTimeout(function () {
  window.scrollTo(0, 1);
}, 1000);

If using jQuery, put it at the end of $(document).ready();. The time-out allows for the browser to determine the height of the page...

edited Apr 23 '18 at 18:50

Peter Mortensen

30,738
21
105
131

answered Feb 24 '11 at 22:19

Mike

29
1

score 2 · Answer 8 · edited Aug 20 '20 at 05:30

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/

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

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

score 1 · Answer 9 · edited Apr 23 '18 at 18:52

I think it will never be solved unless the content is more than the browser window.

Here is some code that will hide the URL on load, on orientation change, and on a touchstart (the touchstart should only be used if you have a persistent hidden URL, which is a whole other can of worms - if you don't, remove that part of the script).

if( !window.location.hash && window.addEventListener ){
    window.addEventListener("load", function() {
        setTimeout(function(){
            window.scrollTo(0, 0);
        }, 0);
    });
    window.addEventListener( "orientationchange",function() {
        setTimeout(function(){
            window.scrollTo(0, 0);
        }, 0);
    });
    window.addEventListener( "touchstart",function() {
         setTimeout(function(){
             window.scrollTo(0, 0);
         }, 0);
     });
}

score 1 · Answer 10 · answered Mar 30 '12 at 12:07

1

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

iPhone Configuring Web Applications

answered Mar 30 '12 at 12:07

Creatorus

35
1

8

This only works when a user has bookmarked the site as a home screen icon. – markquezada Jul 18 '14 at 20:18

score -4 · Answer 11 · answered Aug 14 '19 at 21:49

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

How do I hide the address bar on iPhone?

11 Answers11

Linked

Related