I’m developing a Progressive Web App (PWA) saved to the home screen on iPhone. Despite setting apple-mobile-web-app-capable and apple-mobile-web-app-status-bar-style, there’s a persistent top padding that prevents the app from displaying in full screen. I tried adding padding-top: env(safe-area-inset-top); in CSS, but it didn’t resolve the issue. How can I remove the top padding and achieve a true full-screen display on iOS or maybe to change the color to the top bar section?
I tried adding padding-top: env(safe-area-inset-top); in CSS to account for the safe area inset on iOS devices.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- Other meta tags -->
</head>
<body>
<!-- Your content -->
</body>
</html>
body {
padding-top: env(safe-area-inset-top);
/* Other styles */
}
I expected this CSS rule to remove the persistent top padding and make the app display in true full-screen mode on iOS.
The top padding remains, and the app does not display in full screen as intended.
How can I remove the top padding and achieve a true full-screen display on iOS, or maybe change the color of the top bar section?