Hiding Safari User Interface Components on iPhone

Question

In an attempt to hide the Safari UI components for an web-app bookmarked as a Homescreen Icon. I am using this meta tag

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

as specified on iPhone Dev Center but the address bar and toolbar are still there when launched from the home screen icon. What do I need to do different? Does anyone have an example?

score 30 · Answer 1 · answered Jul 20 '10 at 02:29

30

window.top.scrollTo(0, 1);

Works on iPhone, but not in iPad. I have been successful hiding the browser components on iPad (so presumably everywhere) by using

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

and launching from a home-screen link. I am also using

<meta name="viewport" 
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

I have not tried seeing if the browser components are still hidden if I leave out the viewport properties.

answered Jul 20 '10 at 02:29

Steve Jorgensen

11,725
1
33
43

The first option is the only thing that worked for me. I added And it worked. All the other options weren't working for me at all. – Jorge Pedret Aug 04 '11 at 05:20
same here, scrollTo(0,1) makes the address bar go away, but the meta tags appear to have no impact on it. – chovy Sep 15 '11 at 18:46
3

An important note on `apple-mobile-web-app-capable`, if you already have the application bookmarked, delete the bookmark and re-add to enable the change. – Chris Baxter Dec 10 '12 at 19:01
Is there any other way, instead of 'launching from a home-screen link' to make it work on iPad? – Ganesh Jadhav Sep 11 '13 at 12:47

score 7 · Answer 2 · answered Nov 07 '08 at 21:27

7

Is it being launched from the home screen? The documentation on the linked page does not mention but I found this @ Configuring Web Applications:

For example, you can specify an icon for your web application used to represent it when added to the Home screen, as described in “Specifying a Webpage Icon for Web Clip.” You can also minimize the Safari on iPhone user interface, as described in “Changing the Status Bar Appearance” and “Hiding Safari User Interface Components,” when your web application is launched from the Home screen. These are all optional settings that when added to your web content are ignored by other platforms

answered Nov 07 '08 at 21:27

crashmstr

28,043
9
61
79

1

Here's the updated link: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html – EMMERICH Jun 15 '11 at 07:36
Spot on crashmstr. The meta tags only work... WHEN THE APP IS LAUNCHED FROM THE HOME SCREEN. – Brett Hannah Jan 31 '12 at 14:34

score 6 · Answer 3 · answered Jan 04 '10 at 21:58

6

Have you tried adding...

<meta name="apple-touch-fullscreen" content="yes" />

answered Jan 04 '10 at 21:58

Benoit

680
1
6
17

this is undocumented. probably not used in stable releases of Mobile Safari. – Raptor Nov 12 '12 at 02:28
Indeed, cannot find a reference for this anymore (wrote in 2010). Looks like only `` is advised today (see [here](http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)) – Benoit Mar 22 '13 at 10:40

score 3 · Answer 4 · edited Oct 20 '11 at 21:16

From what I can tell, iOS only pays attention to the flags when you actually add the app. If the apple-mobile-web-app-capable thingy doesn't work at first, try deleting your app from the home screen then re-adding it.

I've run some experiments and found:

the location of the meta tag within the headers doesn't seem to matter (I thought it might!)
after adding the app and having it remove the address bar correctly, if you then remove the meta tags from the web page, iOS continues to remove the toolbar.
even after rebooting the device it still 'remembers' whether to remove the toolbar. The only way I've found of resetting this behaviour is to remove and re-add the app.

Hope that helps!

score 2 · Answer 5 · answered May 16 '14 at 22:07

There is a new directive, called "minimal-ui" that iOS browser takes into account (at least on the iPhone where I tested). Toolbars are hidden until the user clicks on the status bar on top. Very nice for one page apps!

Here is the snippet I use:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

score 2 · Answer 6 · edited May 17 '13 at 12:58

2

I know this is pretty old, but I came across this while searching for a solution. I was able to fix this by also adding:

window.top.scrollTo(0, 1);

to the body's onload method. Hope it helps anyone else coming across this.

edited May 17 '13 at 12:58

Chuck Norris

15,207
15
92
123

answered Jun 15 '10 at 23:25

mbxtr

2,323
1
15
12

score 1 · Answer 7 · answered Aug 30 '12 at 08:58

Try this

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width; user-scalable=0;">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="icon.png">

score 1 · Answer 8 · answered Mar 20 '14 at 21:59

1

Since iOS 7.1, you can use minimal-ui

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

answered Mar 20 '14 at 21:59

B.Asselin

978
10
19

score 1 · Answer 9 · answered Dec 12 '10 at 08:47

1

http://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW2

It works on iOS 4.0.

answered Dec 12 '10 at 08:47

Toby

11
1

score 0 · Answer 10 · answered Sep 12 '12 at 16:47

0

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

This will work if:

The tag exists when the app is added to the home screen.
The app is launched from the home screen.

answered Sep 12 '12 at 16:47

Samuel Lindblom

812
1
6
22

score 0 · Answer 11 · answered Mar 07 '13 at 12:20

0

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

works on iOS6 + Mobile Safari Browser but ONLY if you added the page to your homescreen AFTER you included the meta tag on your site.

answered Mar 07 '13 at 12:20

Charles Ingalls

4,521
5
25
33

score 0 · Answer 12 · answered Apr 30 '13 at 07:17

all above meta tags and window.scrollTo, did not work on ipad for me, i found a button on safari next to bookmarks where you get an option called 'Add to Home Screen' it creates a new tile icon, and you can launch your web app like a native app, and no address bar there.

score 0 · Answer 13 · answered Nov 08 '08 at 16:30

0

That should indeed behave as expected, I have used it in the past without any difficulties.

answered Nov 08 '08 at 16:30

wisequark

3,288
20
12

Hiding Safari User Interface Components on iPhone

13 Answers13

Linked