19

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?

stakx - no longer contributing
  • 83,039
  • 20
  • 168
  • 268
Satch3000
  • 47,356
  • 86
  • 216
  • 346

3 Answers3

48

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" />
Donovan Woodside
  • 1,911
  • 1
  • 19
  • 16
  • +1. I would upvote you more if it was allowed : ) This saved me a lot of time. thx – chrisvillanueva Jun 28 '13 at 23:33
  • Ah, the key is that it needs to launched from home screen in order to hide Safari elements. I was testing it from within Safari and couldn't get it to hide the address bar and footer all the time. – wisbucky Sep 19 '15 at 22:13
  • It is working fine but when I open new page using a tags, it shows up web app in new page in safari and address bar shows up again. Do you know why this happens? – VSB Jan 20 '20 at 06:40
3

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.

Jay
  • 3,471
  • 4
  • 35
  • 49
  • I know that Sencha Touch hides them very well. I hope I can find a solution to get rid of both. – Satch3000 Apr 24 '11 at 16:19
  • 2
    Also, your meta tag is missing height. According to this link http://forum.jquery.com/topic/iphone-safari-address-bar-jumps-down-after-page-transition this is what you might be trying to do – Jay Apr 24 '11 at 16:43
  • Tried that be I lost my header toolbar :o/ – Satch3000 Apr 24 '11 at 17:28
0

Rob, try adding below script. This should do the trick of opening new request in the same window

<script type="text/javascript">
    window.onload = function () {
        var a = document.getElementsByTagName("a");
        for (var i = 0; i < a.length; i++) {
            if (a[i].className.match("noeffect")) {
                // Does nothing
            }
            else {
                a[i].onclick = function () {
                    window.location = this.getAttribute("href");
                    return false;
                };
            }
        }
    };
</script>
Saurin
  • 1