When you set your PWA to display: standalone, modern iPhones will overlay their hardware notch and home indicator directly on top of your app's header and footer. Use this tool to visualize the problem and generate the CSS fix.
When a Progressive Web App is launched from the iOS Home Screen (in standalone mode), Apple removes the Safari address bar. By default, iOS extends your web content all the way to the absolute edges of the physical screen, causing your header to slip underneath the camera notch or Dynamic Island, and your footer to conflict with the home swipe indicator.
Adding viewport-fit=cover to your HTML meta viewport tag tells the browser to span your web app across the entire screen (including the hazardous hardware areas). Without this tag, iOS will inject ugly white or black bars at the top and bottom of your app to protect your content, breaking the native "fullscreen" illusion.
Once your app is spanning the full screen, you must use the CSS env() function to add padding to the elements that touch the edges of the screen. For example, setting padding-top: env(safe-area-inset-top); on your header tells the browser to dynamically calculate the exact height of the notch and push your content down safely.
Usually, no. Standard Android Chrome handles PWAs differently by keeping the status bar intact. However, because env() safely resolves to 0px on devices that don't have hardware notches (or devices that don't support the property), it is completely safe to leave this CSS in your global stylesheet. It won't break your Android layout.
Yes. Dealing with iOS quirks, meta tags, and splash screens is a massive headache. Progressier automatically injects the correct Viewport configurations, handles safe areas, and manages your standalone display modes so your app looks perfectly native on every device. Sign up for the complete solution.
With Progressier, viewport meta tags, safe-area CSS, and native display modes are injected into your app automatically.
Generate PWA See plans