iOS Web App Question

Discussion in 'Web Design and Development' started by jsavvy, Oct 6, 2015.

  1. jsavvy macrumors member

    jsavvy

    Joined:
    Aug 19, 2011
    #1
    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.
     
  2. 960design macrumors 68000

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #2
    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
     
  3. jsavvy thread starter macrumors member

    jsavvy

    Joined:
    Aug 19, 2011
    #3
    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?
     
  4. 960design macrumors 68000

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #4
    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.
     
  5. jsavvy thread starter macrumors member

    jsavvy

    Joined:
    Aug 19, 2011
    #5
    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.
     
  6. D.T. macrumors 603

    D.T.

    Joined:
    Sep 15, 2011
    Location:
    Vilano Beach, FL
    #6
    I'm sure some of us wouldn't mind testing it for you if you provided a link to your dev server :)
     
  7. 2457244 macrumors regular

    Joined:
    Jul 20, 2015
    #7
    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.
     
  8. jsavvy, Oct 8, 2015
    Last edited: Oct 23, 2015

    jsavvy thread starter macrumors member

    jsavvy

    Joined:
    Aug 19, 2011
    #8
    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
     

Share This Page