Dynamically update viewport on load

p0wen · Sep 29, 2020 · 09bf857 · 09bf857
1 parent 241c244
commit 09bf857
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1,15 +1,16 @@
 /* Main Page */
 .html {
     height: 100%;
-    --vh: 614px;
+    --vh: 7.96px;
 }
 
 .appview {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
-    height: calc(100 * var(--vh));;
+    height: 100%;
+    height: calc(100 * var(--vh));
     z-index: -1;
 }
 .app {

diff --git a/assets/js/scripts/app.js b/assets/js/scripts/app.js
@@ -20,11 +20,19 @@ if ("serviceWorker" in navigator) {
   });
 }
 
+/**
+ * Fix Viewport for mobile browser (https://dev.to/admitkard/mobile-issue-with-100vh-height-100-100vh-3-solutions-3nae)
+ */
+
 window.addEventListener('resize', () => { 
-  document.querySelector(':root').style
-    .setProperty('--vh', window.innerHeight/100 + 'px');
+ resizeView()
 })
 
+function resizeView() {
+ 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();
@@ -137,6 +145,7 @@ outline.style.strokeDashoffset = outlineLength;
 // Initiliazation of the App
 
 function init() {
+  resizeView()
   dateSetup();
   timeSensitivBackground(currentHour);
   timerSettings();

diff --git a/index.html b/index.html
@@ -294,6 +294,7 @@ <h5 class="modal-title">Congratulations</h5>
     </div>
 
     <!-- Load Scripts-->
+
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>