From ae7875955af09efe9d708f8bfdde4ff05bc95021 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Fri, 2 Sep 2022 14:47:53 +0300
Subject: [PATCH] use visualviewport instead of innerheight

---
 frontend/src/responsive.js | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/src/responsive.js b/frontend/src/responsive.js
index 3fdd2f4..7c72ae2 100644
--- a/frontend/src/responsive.js
+++ b/frontend/src/responsive.js
@@ -9,12 +9,21 @@ function initViewportSizeHandler() {
         root.style.setProperty("--viewportWidth", "100dvw");
         root.style.setProperty("--viewportHeight", "100dvh");
     } else if (method === "javascriptResponsive") {
-        const updateUnits = () => {
-            root.style.setProperty("--viewportWidth", `${window.innerWidth}px`);
-            root.style.setProperty("--viewportHeight", `${window.innerHeight}px`);
-        };
-        window.addEventListener("resize", updateUnits);
-        updateUnits();
+        if (window.visualViewport) {
+            const updateUnits = () => {
+                root.style.setProperty("--viewportWidth", `${window.visualViewport.width}px`);
+                root.style.setProperty("--viewportHeight", `${window.visualViewport.height}px`);
+            };
+            window.visualViewport.addEventListener("resize", updateUnits);
+            updateUnits();
+        } else {
+            const updateUnits = () => {
+                root.style.setProperty("--viewportWidth", `${window.innerWidth}px`);
+                root.style.setProperty("--viewportHeight", `${window.innerHeight}px`);
+            };
+            window.addEventListener("resize", updateUnits);
+            updateUnits();
+        }
     } else if (method === "normalUnits") {
         root.style.setProperty("--viewportWidth", "100vw");
         root.style.setProperty("--viewportHeight", "100vh");