Merge pull request #573 from pearpearB/Fix/모바일주소창헤더가려짐-572

[Fix] 모바일에서 헤더 주소창에 가려 안보임 수정 Close #572
blind-42 · Mar 20, 2022 · 9284809 · 9284809
2 parents ff13766 + 9bd0b7f
commit 9284809
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 2 deletions.
diff --git a/client/public/index.html b/client/public/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="manifest.json" />
     <link rel="shortcut icon" href="images/bLogo.png" />
     <title>42byte</title>
     <meta name="author" content="개발자국" />
@@ -32,6 +32,10 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&family=Press+Start+2P&display=swap"
     />
+    <link rel="apple-touch-icon" href="images/bLogo.png" />
+    <meta name="apple-mobile-web-app-title" content="42byte" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="mobile-web-app-capable" content="yes" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/client/public/manifest.json b/client/public/manifest.json
@@ -3,7 +3,7 @@
   "name": "42byte",
   "icons": [
     {
-      "src": "images/BLogo.png",
+      "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     }

diff --git a/client/src/components/Header/styled.ts b/client/src/components/Header/styled.ts
@@ -60,6 +60,7 @@ export const HeaderBackdrop = styled.div`
   align-items: center;
   width: 100vw;
   height: 100vh;
+  max-height: -webkit-fill-available;
 `;
 
 export const UtilButton = styled.div`

diff --git a/client/src/styles/styled.ts b/client/src/styles/styled.ts
@@ -6,6 +6,7 @@ export const AppContainer = styled.div`
   justify-items: center;
   background: #6bb8f0;
   height: 100vh;
+  max-height: -webkit-fill-available;
   input[type='button'] {
     -webkit-appearance: none;
   }