Fix height styling for mobile browser view

p0wen · Sep 29, 2020 · d12e270 · d12e270
1 parent fcba498
commit d12e270
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1,11 +1,22 @@
 /* Main Page */
+.html {
+    height: 100%;
+    --vh: 614px;
+}
+
+@supports(padding: max(0px)) {
+    .post {
+        padding-left: max(12px, env(safe-area-inset-left));
+        padding-right: max(12px, env(safe-area-inset-right));
+    }
+}
 
 .appview {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
-    height: 100vh;
+    height: calc(100 * var(--vh));;
     z-index: -1;
 }
 .app {

diff --git a/assets/js/scripts/app.js b/assets/js/scripts/app.js
@@ -20,6 +20,11 @@ if ("serviceWorker" in navigator) {
   });
 }
 
+window.addEventListener('resize', () => { 
+  document.querySelector(':root').style
+    .setProperty('--vh', window.innerHeight/100 + 'px');
+})
+
 //get today's date for all kinds of function
 let currentHour = new Date().getHours();
 let currDate = new Date();

diff --git a/index.html b/index.html
@@ -25,6 +25,7 @@
       href="assets/media/img/favicon_io/zenapple.png"
     />
     <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="viewport" content="initial-scale=1, viewport-fit=cover" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
     <meta name="apple-mobile-web-app-title" content="ZenGarden" />
     <meta
@@ -302,7 +303,5 @@ <h5 class="modal-title">Congratulations</h5>
       crossorigin="anonymous"
     ></script>
     <script src="assets/js/scripts/app.js"></script>
-    <!-- Load Tests -->
-    <script src="assets/js/specs/appSpecs.js"></script>
   </body>
 </html>