Hide Safari address bar and footer

Question

On my jQuery Mobile project I'm using the following code:

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

I'm getting the Safari browser address bar and nav footer. How can I hide those so I can just have my app showing?

Answer 1

You can setup a few meta tags to tell iOS that your site can be added to the Home Screen as a web app. Once launched from there, all of the Safari elements are hidden.

Check out the section titled "Hiding Safari User Interface Components" here.

You can specify start up splash screen images and custom icons for the app as it appears on the home screen.

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-startup-image" href="apple-touch-startup-image-320x460.png" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="apple-touch-startup-image-768x1004.png" />

Answer 2

You should not need a <meta> tag. jQuery mobile should take care of hiding the address bar on iOS. Never been able to get the nav footer disappear myself.