Hide Safari address bar and footer

问题

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?

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

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

回答3:

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>

来源：https://stackoverflow.com/questions/5767565/hide-safari-address-bar-and-footer

标签

jquery-mobile

safari

viewport