viewport-fit=cover not extending viewport into status bar area (around notch) on iOS Safari

user_16569904 0
Viewed 1582

In my PWA, I have set

<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover" />

I also have

<meta name="apple-mobile-web-app-capable" content="yes" /> which I believe is necessary to encourage the view into standalone mode.

All documentation I've read says that this should be enough to force the PWA into fullscreen mode but it's not happening.

Screenshot of simulator running PWA with element selected

The viewport continues to begin under the status bar no matter what I try.

Is there something else that needs to happen to get things to "move up"?

(Tested on Safari 14 and 15)

progressive-web-apps ios
1 Answers

After some further experimentation, it turns out everything in this post is true:

  • You do need to have the viewport meta tag with a value of viewport-fit=cover and apple-mobile-web-app-capable meta set, but you also need to have

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Which is a real pain. This value is basically useless if you app is light in light mode and dark in dark mode as the status bar text is white in light mode and dark in dark. There is no alternative value that does the opposite.

Changing the value of this meta tag after the first load of the PWA changes nothing. Other meta tags will respond to changes, but apple-mobile-web-app-status-bar-style seems to be locked after first load. To update it, the home screen shortcut needs to be deleted and the PWA re-added.

Maximiliano also makes some good observations about changes to the status bar values in iOS Safari 14.5 here. There doesn't seem to be a good update to this in Safari 15.

user_165699040
Related