1

Is there a workaround that could help me mimic a background color in the status bar of a PWA on an iOS device once the app is installed to the homescreen?

I have currently set the apple-mobile-web-app-status-bar-style meta tag to "black-translucent" as opposed to the other two options available for iOS which are "black" and "white". I have done this because I want to perhaps place a div underneath the status bar that would be the correct color (#2e0c2a) and which would make the status bar look like it is in fact that color.

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

I expect to get a status bar that is the color of my navbar (#2e0c2a) like the image on the left, but what is actually happening is that content is simply moving behind the translucent status bar and appearing incorrectly. I do not know what code is necessary to create a div that would appear only behind the status bar or to stretch the navbar so that it may take up the entire space.

Desired V. Actual

roki
  • 21
  • 2

1 Answers1

1

Add this meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

then add:

padding: env(safe-area-inset-top);

to your navbar styling in css (or whatever element you would like to see take up the space for the iPhone X status bar.

Hope this helps!

roki
  • 21
  • 2