Hide Safari address bar and footer

jquery-mobile safari viewport
Satch3000 picture Satch3000 · Apr 24, 2011 · Viewed 30.4k times · Source

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

Donovan Woodside picture Donovan Woodside · Apr 25, 2011

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

Related questions

Eliminate 300ms delay on click events in mobile Safari

I've read that mobile Safari has a 300ms delay on click events from the time the link/button is clicked to the time the event fires. The reason for the delay is to wait to see if the user intends …

Read More
Prevent iPad web app from showing Safari address bar

I have a web app running on Safari on an iPad. I am starting the app from the iPad home page. I want the app to start in full-screen mode, and to continue running in full-screen mode (i.e. not …

Read More
How can I check if a checkbox is checked?

I am building a mobile web app with jQuery Mobile and I want to check if a checkbox is checked. Here is my code. <script type=text/javascript> function validate(){ if (remember.checked == 1){ alert("checked") ; } else { alert("You …

Read More