Hide Safari address bar and footer

Question

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

Answer 1

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>

Answer 2

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