After upgrade to iOS 11.3 web app does not show full screen per apple-mobile-web-app-capable

Question

I have a web app that contains the meta

<meta name="apple-mobile-web-app-capable" content="yes">

Before iOS 11.3, when "added to Home Screen" it would then open like a standalone app without the navigation bar.

After 11.3 it now opens with the navigation bar in the browser.

Answer 1

After hours of troubleshooting I found the following that might be helpful for others.

For Android/Chrome compatibility, I already had the following in my html file:

<link rel="manifest" href="/manifest.json">

The manifest.json had no "display": "standalone" entry, it just had icons and name defined. It appears that before 11.3 the file was ignored by safari but now it is considered and has precedence over the meta tag apple-mobile-web-app-capable . Since the default for display: is browser , the app was opened inside a browser with a navigation bar.

When I added the line "display": "standalone" in the manifest file the problem went away.

Answer 2

I just ran into this as well. @gae123 is right about the manifest.json. You may also try removing any conflicting apple specific meta tags which can be seen here: Apple Doc . I also found that "display": "fullscreen" in the json was what it took, your mileage may vary.