Cover the entire screen with your PWA on iOS

In the example below, the notch is black but this color can be set to any color with the theme-color property specified in the manifest.json file.

To remove this behaviour you need to add / update the following meta elements in your HTML head element:

<meta name="viewport" content="initial-scale=1, viewport-fit=cover, width=device-width"></meta>
<meta name="apple-mobile-web-app-capable" content="yes"></meta>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"></meta>

Now when you check your PWA on your iOS device, you will see that the content is covered under the notches. Example:

Now with some CSS it is up to you to set the margins or paddings to the elements to make sure that all elements are aligned properly. The screenshot above is from https://ccns.news which is a Drupal website with a custom theme where I use TailwindCSS to apply styling. With just one line of CSS I fixed the padding. For the HTML header element I’ve added this CSS code: padding-top: env(safe-area-inset-top,0);.

Result:

Please visit https://dev.to/karmasakshi/make-your-pwas-look-handsome-on-ios-1o08 with some more technical details how to set paddings which might help you.

This commit shows how I’ve applied the same trick within a TailwindCSS styled + Nuxt powered progressive web application (https://nuxstr.nostrver.se).

More resources

• https://medium.com/@evkirkiles/coloring-the-webkit-browser-bars-28d75cd8cf7f
• https://css-tricks.com/meta-theme-color-and-trickery/