Measure app height in JS; dvh resolves stale in installed Android windows

Dami committed Sep 22fba043e

commit: fba043ee54181fa22d0a23dc1888169a29a5ef3d
parent: dfb1f90cd0ae7dd103bc8d81d6ce71f8a5362f27
author: Dami <dami.etoile@gmail.com>

2 files changed, +4 -1wrap lines

M	style.css	2	+-
M	viewport.js	3	+++

M style.css +1 -1

@@ -92,7 +92,7 @@ h1, h2, h3, p { margin: 0; }
9292 9393 .tool-body { position: fixed; inset: 0; overflow: hidden; }9494 .tool {95-  height: 100dvh;95+  height: 100%; height: var(--app-height, 100%);9696   display: flex; flex-direction: column;9797   padding-left: var(--safe-left); padding-right: var(--safe-right);9898 }

M viewport.js +3 -0

@@ -3,6 +3,9 @@
33 // read env(safe-area-inset-*). Android Chrome must never see it: once a window has gone edge-to-edge44 // it does not reliably come back, and the bottom of the layout ends up under the gesture bar.55 (function(){6+  // Viewport units can resolve stale in an installed Android window, so the app height is measured.7+  function fit(){document.documentElement.style.setProperty('--app-height',window.innerHeight+'px');}8+  fit();window.addEventListener('resize',fit);window.addEventListener('orientationchange',fit);69   var ios=/iPad|iPhone|iPod/.test(navigator.userAgent)||(navigator.platform==='MacIntel'&&navigator.maxTouchPoints>1);710   if(!ios)return;811   var m=document.querySelector('meta[name=viewport]');