Removing vertical white bars within landscaping viewing on Safari iOS

[si1k]

Description

Currently the starter has white vertical bars when viewed landscape on Safari on iPhones with a notch. This change expands the content window to include the notch in Safari when viewed in landscape yet not include the notch when viewed vertically or if installed as a PWA (so the header is not cut off when vertically viewed).

The additional meta tags, besides the viewport-fit=cover are default functionality; however, including them protects the PWA in the case viewport-fit=cover becomes no longer supported. If using transparent-black the header is cut off so I used black though default works as well.

Tested on iPhone 12 Pro Max.

Figure 1 - BEFORE:

Figure 2 - AFTER:

Notion Test Page ID

https://alexchaveriat-l3qqg3dvy-si1k.vercel.app/

[vercel[bot]]

@si1k is attempting to deploy a commit to the Saasify Team on Vercel.

A member of the Team first needs to authorize it.

[transitive-bullshit]

Thanks @si1k 🙏