Hiding Safari User Interface Components on iPhone

safari iphone iphone-web-app iphone-standalone-web-app

42,624

Solution 1

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.

Solution 2

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

Solution 3

Have you tried adding...

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

Solution 4

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!

Solution 5

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.

View more solutions

42,624

Author by

Admin

Updated on March 26, 2020

Comments

Admin over 4 years
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?
EMMERICH about 13 years

Here's the updated link: developer.apple.com/library/safari/#documentation/…
Jorge Pedret almost 13 years

The first option is the only thing that worked for me. I added <body onload="window.top.scrollTo(0,1);"> And it worked. All the other options weren't working for me at all.
chovy almost 13 years

same here, scrollTo(0,1) makes the address bar go away, but the meta tags appear to have no impact on it.
Brett Hannah over 12 years

Spot on crashmstr. The meta tags only work... WHEN THE APP IS LAUNCHED FROM THE HOME SCREEN.
Raptor over 11 years

this is undocumented. probably not used in stable releases of Mobile Safari.
Chris Baxter over 11 years

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.
Benoit over 11 years

Indeed, cannot find a reference for this anymore (wrote in 2010). Looks like only <meta name="apple-mobile-web-app-capable" content="yes" /> is advised today (see here)
Ganesh Jadhav almost 11 years

Is there any other way, instead of 'launching from a home-screen link' to make it work on iPad?