diff --git a/index.html b/index.html index 5ecf3ef..90c8121 100644 --- a/index.html +++ b/index.html @@ -46,6 +46,14 @@ width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); height: calc(100vh - env(safe-area-inset-top, 0px)); height: calc(100dvh - env(safe-area-inset-top, 0px)); } + /* ...but NOT installed. Launched from the homescreen, WebKit does not initialise the DYNAMIC + viewport until the geometry is "exercised" — 100dvh stays provisional until you rotate the + phone, which is exactly the bug. Standalone has no toolbars, so 100vh is both correct and + stable from the first frame; dvh only exists for the browser's disappearing toolbars. */ + @media (display-mode: standalone) { + html { height: 100vh; } + canvas { height: calc(100vh - env(safe-area-inset-top, 0px)); } + } /* desktop key hint — up in the empty top-right corner now that the rack owns the bottom edge */ #hint { position: fixed; top: 6px; right: 10px; text-align: right; font: 400 10px Silkscreen, monospace; color: #6b7688; } @@ -89,6 +97,6 @@
- +