Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

iOS Web App Question

jsavvy

jsavvy

macrumors regular
Original poster
Aug 19, 2011
135
121
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

960design

macrumors 68040
Apr 17, 2012
3,700
1,569
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

jsavvy

macrumors regular
Original poster
Aug 19, 2011
135
121
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?
 
960design

960design

macrumors 68040
Apr 17, 2012
3,700
1,569
Destin, FL
jsavvy said:
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?
Click to expand...
Have you "Add to Home Screen" to appify your web app? Launch from web app icon. Let us know if that is what you are doing.
 
jsavvy

jsavvy

macrumors regular
Original poster
Aug 19, 2011
135
121
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.
 
2

2457244

macrumors regular
Jul 20, 2015
238
140
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.
Click to expand...

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

jsavvy

macrumors regular
Original poster
Aug 19, 2011
135
121
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:
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom