Fixing IOS 11 web apps (apple-mobile-web-app-capable)

If you are building a progressive web app or at least a web app that uses apple’s “apple-mobile-web-app-capable” meta tag then you may have recently run into a problem where if you add your site to the home screen and launch it you have a white 20px bar on the bottom and your content overlaps with the IOS status bar (see below).

Here’s the before and after screenshots

After some digging i found it’s a problem with using viewport-fit=cover which is required for an app to look great on the new iPhoneX (especially with Ionic).

To get around the problem i conditionally set the viewport-fit property by adding this bit of script to index.html

if (window.navigator.standalone) {
document.querySelector('meta[name=viewport]').setAttribute('content', 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no');
}

This detects if we are in “standalone” web app mode and if so will replace the viewport metatag to be one without viewport-fit=cover. I still leave in the metatag:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

That’s essentially it.

Did you know you can add an app to the home screen?

You can! In IOS Safari press the share icon (in the middle of the bottom toolbar) and choose Add to home screen (as shown below).