fix: Status Bar Color Issue in PWA on iOS 18

Signed-off-by: Philip H <47042125+pheiduck@users.noreply.github.com>
This commit is contained in:
Philip H 2024-08-08 20:33:01 +02:00
parent 33e95bac5e
commit 9dd7f256ba
No known key found for this signature in database
GPG Key ID: DA39C2199C603FA5
2 changed files with 7 additions and 3 deletions

View File

@ -63,9 +63,12 @@ html,
body { body {
margin: 0; margin: 0;
/* 1 */
line-height: inherit; line-height: inherit;
/* 2 */ padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
box-sizing: border-box;
} }
/* /*

View File

@ -10,6 +10,7 @@
<link rel="apple-touch-icon" href="./img/apple-touch-icon.png"> <link rel="apple-touch-icon" href="./img/apple-touch-icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
</head> </head>
<style> <style>
[v-cloak] { [v-cloak] {
@ -614,4 +615,4 @@
<script src="./js/app.js"></script> <script src="./js/app.js"></script>
</body> </body>
</html> </html>