Menu
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?
401
Do you currently have multiple tabs open in Safari? If so, that would be why the option is unavailable/grayed out. You'd want to close out additional tabs so you only have one tab open in Safari, and then you should be able to select the Hide Tab Bar option in the View menu. Cheers!
While browsing a website, click on the icon with the two A's next to the website's URL. You'll see a Settings menu for Safari. Tap the option to “Show Top Address Bar.”
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" />
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.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
