fix: iOS 웹페이지 레이아웃 꺠지는 문제 해결

Author: game240

index.html

@@ -6,7 +6,7 @@
     <!-- <link rel="icon" href="/favicon.ico" sizes="32x32" /> -->
     <link rel="icon" href="/favicon.ico" />
     <link rel="icon" type="image/svg+xml" href="/logo.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta name="theme-color" content="#000000" />
 
     <!-- Primary Meta Tags -->

src/pages/MainVer2.scss

@@ -20,6 +20,8 @@
 
 .main-ver2 .page1-width {
   height: 85vh;
+  height: 85svh; /* iOS Safari safe visual viewport */
+  height: 85dvh; /* Dynamic viewport (newer Safari/Chromium) */
 
   @include r.media-laptop {
     width: 1280px;
@@ -199,7 +201,9 @@
 .main-ver2 .page-size {
   position: relative;
   width: 100%;
-  height: 100vh;
+  height: 100vh;  /* fallback */
+  height: 100svh; /* iOS Safari safe visual viewport */
+  height: 100dvh; /* Dynamic viewport */
   @include r.media-tablet {
     height: auto;
   }
@@ -249,10 +253,12 @@
 }
 
 .main-ver2 .page4 {
-  height: 100vh;
+  height: 100vh;  /* fallback */
+  height: 100svh; /* iOS Safari safe visual viewport */
+  height: 100dvh; /* Dynamic viewport */
   @include r.media-tablet {
     height: calc(534px + 60px);
-    width: fit;
+    width: 100%;
   }
   @include r.media-mobile {
     height: calc(351px + 36px);

src/pages/MainVer2Page2.scss

@@ -42,7 +42,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    width: 100vw;
+    width: 100%;
   }
 }