Hiding Safari User Interface Components on iPhone

safari iphone iphone-web-app iphone-standalone-web-app
picture · Nov 7, 2008 · Viewed 42.3k times · Source

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?

Answer

Steve Jorgensen picture Steve Jorgensen · Jul 20, 2010 
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.

Related questions

HTML5 Video tag not working in Safari , iPhone and iPad

I am trying to create an html5 web page in which there is a small video like 13s , I converted the flash version of this video into 3 format : .ogv using fireFogg , .webm using firefogg also and .mp4 using HandBrake application …

Read More
How to disable phone number linking in Mobile Safari?

Safari on iPhone automatically creates links for strings of digits that appear to the telephone numbers. I am writing a web page containing an IP address, and Safari is turning that into a phone number link. Is it possible to …

Read More
Does overflow:hidden applied to <body> work on iPhone Safari?

Does overflow:hidden applied to <body> work on iPhone Safari? It seems not. I can't create a wrapper on the whole website to achieve that... Do you know the solution? Example: I have a long page, and simply …

Read More