iOS Web App Question

jsavvy

macrumors regular
Original poster
Aug 19, 2011
123
98
I hope this question is in the right spot. I have been working on a web app that will work in iOS, but there are some pieces of code that Safari is not recognizing. I can get Safari to recognize my apple-touch-icon but nothing else.

I am trying to hide Safari's user interface and change the status bar color by using these lines of code found on Apple's developer site. I have also closed the tag to no avail.
HTML:
<meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
I have been testing this in iOS9. I have found many issues were present in iOS8 regarding the same things. Has anyone got this working in iOS9? Were these bugs actually fixed in iOS8? Any help would be appreciated.
 

960design

macrumors 68030
Apr 17, 2012
2,989
939
Destin, FL
I use both of those is several apps with no issues. They work exactly as suspected in iOS8, iOS9, and currently testing in iOS9.1
 

jsavvy

macrumors regular
Original poster
Aug 19, 2011
123
98
I can only get it to work in iOS Simulator, but not on my iPhone 5 or iPad air. Any idea why it doesn't work?
 

jsavvy

macrumors regular
Original poster
Aug 19, 2011
123
98
Yes, I have added it to the home screen to appify it. My touch icon was properly set to the home screen and that's what I launched the app from. I cleared Safaris's cache prior to launching the app to see if that would help but the status bar remains white and the url input is still visible.
 

2457244

macrumors regular
Jul 20, 2015
238
139
I am trying to hide Safari's user interface and change the status bar color by using these lines of code found on Apple's developer site. I have also closed the tag to no avail.
Those are meta tags, they are self closing you don't have to close them.. Both lines as you have posted them here on the forum are valid if they are placed in between the head section of the HTML document.

Code:
<html>
<head>
*** here ***

</head>
....
...

After that you have to make a shortcut on your springboard else it won't work. So.. add the code to the head section. Save your document, visit the URL and Bookmark your site to your homescreen/springboard.
After that launch your site via the app icon on your homescreen and you shouldn't see any Safari UI.
 

jsavvy

macrumors regular
Original poster
Aug 19, 2011
123
98
Thanks for your replies everyone. Moving my web app's homepage to the document root helped remove safari's controls, but I still cannot get change the the status to black or black-translucent.

Shmoo - I know meta tags do not have to be closed, but I was just trying anything to make it work. I have already tried what you outlined in your post many times over with no luck.

I created a super simple web page with the goal of getting the status bar to be black-translucent, but it did not work. Testing on iOS 9.0.2 on iPhone 5, 5s and iPad air. If anyone is willing to test it out the link is (removed) and let me know their results that would be great. Feel free to inspect the code in hopes to correct a mistake. Thanks.

Update: removed link
 
Last edited:
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.