Make Your PWAs Look Handsome on iOS
Tags: webdev, css, react, pwa
Published: 2021-02-10 10:35:43

> I talk about how to embrace the notch to make your PWAs cover the entire screen on iOS devices.

### The Problem

To avoid content being hidden under notches, Apple limits the viewport of PWAs by default:

![Cinepotato added to Home Screen on iPhone X](https://dev-to-uploads.s3.amazonaws.com/i/3j5qwvwda0y2c9vmlqcf.png "Cinepotato added to Home Screen on iPhone X")

Apple also limits the viewport on iPhones and iPads **without a notch** to the area below the Status Bar:

![Cinepotato added to Home Screen on iPad 2020](https://dev-to-uploads.s3.amazonaws.com/i/n2bvmuqa7yq5axgppjfl.png "Cinepotato added to Home Screen on iPad 2020")

If you want your PWA to embrace the notch and make it cover the entire screen, you will need a small hack.

### The Solution

Set your document to flow to the notch area:

```html
// index.html

<head>
  ...
  <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>
  ...
</head>
```

Note that this will set the font color of the iOS Status Bar to white.

**The hack**: Set the minimum height of the document to 100% plus the height of the safe area on top. This will prevent a white bar in the bottom which gets shown since you moved the document “up”.

Also, add safe area padding to all 4 sides to ensure content is never hidden under the notch regardless of the device orientation:

```css
/* styles.css */

html {
  min-height: calc(100% + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  ...
  background-attachment: fixed;
  background-image: url('/bg.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
```

### The Result

![umagoyal.com added to Home Screen on iPhone X](https://dev-to-uploads.s3.amazonaws.com/i/vhazidii9m5my212fj1u.png "umagoyal.com added to Home Screen on iPhone X")

![umagoyal.com added to Home Screen on iPad 2020](https://dev-to-uploads.s3.amazonaws.com/i/ji6r20yogkd5vw3pa882.png "umagoyal.com added to Home Screen on iPad 2020")

### Bonus Tip

If you have elements with `position: fixed` (e.g. toast, sidebar, bottom navigation, etc.) add the safe area padding to their containers or themselves, whichever is relevant. **You only need to pad the sides where the notch can possibly be positioned.**

```css
/* styles.css */

.left-sidebar {
  padding: env(safe-area-inset-top) 0 0 env(safe-area-inset-left);
}
```

![Sidebar of Share By Cam added to Home Screen on iPhone X](https://dev-to-uploads.s3.amazonaws.com/i/gluuz11zkj5nng88khrh.png "Sidebar of Share By Cam added to Home Screen on iPhone X")

![Sidebar of Share By Cam added to Home Screen on iPhone X](https://dev-to-uploads.s3.amazonaws.com/i/2tug96qxqult943asyxb.png "Sidebar of Share By Cam added to Home Screen on iPhone X")

For fixed headers, you can either choose to display the header below the notch area (like [Share By Cam](https://shareby.cam) does) or pad relevant sides of the header instead of html to fill the notch area.

---

I developed this hack after several retries way back on iOS 12, but never shared hoping it would be fixed by Apple. Looks like this quirk is here to stay, so be it. Cheers!

*Shout-out to [MockUPhone](https://mockuphone.com) for the brilliant phone mocking tool!*