diff --git a/app.js b/app.js index a476505..ad75b9e 100644 --- a/app.js +++ b/app.js @@ -37,6 +37,17 @@ const MODES = { }, }; +syncViewportHeight(); +window.addEventListener("resize", syncViewportHeight); +window.addEventListener("pageshow", syncViewportHeight); +window.addEventListener("orientationchange", syncViewportHeight); +window.visualViewport?.addEventListener("resize", syncViewportHeight); +window.visualViewport?.addEventListener("scroll", syncViewportHeight); +window.setTimeout(syncViewportHeight, 0); +window.requestAnimationFrame(() => { + window.requestAnimationFrame(syncViewportHeight); +}); + let match = readStoredMatch(); let dirty = false; @@ -79,6 +90,11 @@ switch (PAGE) { break; } +function syncViewportHeight() { + const viewportHeight = window.visualViewport?.height ?? window.innerHeight; + document.documentElement.style.setProperty("--app-viewport-height", `${Math.round(viewportHeight)}px`); +} + function initSetupPage() { const form = document.querySelector("#setupForm"); const summary = document.querySelector("#setupSummary"); diff --git a/chrono.html b/chrono.html index 55d55bf..31d283c 100644 --- a/chrono.html +++ b/chrono.html @@ -21,7 +21,7 @@ -
+