Hiding Safari User Interface Components on iPhone

Hiding Safari User Interface Components on iPhone

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?

only character - not special/numbers from keyboard - iPhone


iphone web page transitions
window.top.scrollTo(0, 1); 
Works on iPhone, although not in iPad. How to open a new view when touching on a uiview? I have been successful hiding the browser components on iPad (so presumably everywhere) by using. UITableView Swipe to delete: how to customize button and action?
<meta name="apple-mobile-web-app-capable" content="yes" /> 
and launching from a home-screen link. How do you get an iPhone's Device Name in C# I am also using. How do you get the viewport scale after pinch/zoom on an iPhone web app?
<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.. asp.net Mobile implementation on IPhone, Blackberry and other mobile devices
Using an Objective-C++ file from a C++ file


Is it being launched from the home screen? The documentation on the linked page does not mention although I found this @ Configuring Web Applications:.
For example, you must 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 must 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 this when added to your web content are ignored by another platforms.


Have you tried adding....
<meta name="apple-touch-fullscreen" content="yes" /> 


From what I must tell, iOS only pays attention to the flags when you actually add the app. If the apple-mobile-web-app-capable thingy doesn't job at first, try deleting your app from the home screen then re-adding it.. I've run any 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 this helps!.


I know this is pretty old, although 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..



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


There is a new directive, called "minimal-ui" this 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">.


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


<meta name="apple-mobile-web-app-capable" content="yes" /> 
This will job if:.
  1. The tag exists when the app is added to the home screen.
  2. The app is launched from the home screen.


<meta name="apple-mobile-web-app-capable" content="yes" /> 
works on iOS6 + Mobile Safari Browser although ONLY if you added the page to your homescreen AFTER you included the meta tag on your site..


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


Since iOS 7.1, you must use minimal-ui.
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"> 

72 out of 100 based on 27 user ratings 452 reviews