feat: iOS PWA

lideming · Jan 20, 2025 · 6213520 · 6213520
1 parent 90ad47f
commit 6213520
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -2,13 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width,user-scalable=0" />
+    <meta name="viewport" content="width=device-width,user-scalable=0,viewport-fit=cover" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <meta name="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" />
     <meta id="meta-theme-color" name="theme-color" content="" />
     <link rel="manifest" href="resources/manifest.json" />
     <link rel="icon" href="resources/app_icon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="resources/app_icon.svg" />
     <title>Music Cloud</title>
     <!-- Preload style -->
     <style>

diff --git a/resources/manifest.json b/resources/manifest.json
@@ -2,7 +2,7 @@
   "name": "MusicCloud",
   "short_name": "MusicCloud",
   "start_url": "..",
-  "display": "minimal-ui",
+  "display": "standalone",
   "background_color": "#fff",
   "description": "MusicCloud for Web",
   "icons": [

diff --git a/style.less b/style.less
@@ -58,6 +58,8 @@ body {
   background: var(--color-bg);
   color: var(--color-text);
   --bottombar-height: 70px;
+  --page-padding-bottom: 0;
+  --page-padding-bottom: env(safe-area-inset-bottom);
   height: 100%;
   overflow: hidden;
 }
@@ -208,7 +210,7 @@ a {
   }
 }
 #main-container {
-  height: calc(100% - var(--bottombar-height));
+  height: calc(100% - var(--bottombar-height) - var(--page-padding-bottom));
   position: relative;
   contain: strict;
   &::after {
@@ -725,7 +727,7 @@ a {
 }
 .bottombar {
   position: fixed;
-  bottom: 0;
+  bottom: var(--page-padding-bottom);
   width: 100%;
   display: flex;
   height: var(--bottombar-height);