Minor fixing

proj-web/index.html

@@ -5,17 +5,28 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
     <title>Shadow Over Bishkek</title>
     <style>
+        :root {
+            /* Visible viewport size, kept in sync by syncViewport() below.
+               100vh on mobile is the *largest* viewport (URL bar hidden) and
+               would push the bottom of the canvas off-screen. */
+            --app-w: 100%;
+            --app-h: 100dvh;
+        }
         body, html {
             margin: 0; padding: 0; width: 100%; height: 100%;
             overflow: hidden; background-color: #000;
-            position: fixed;
+            position: fixed; top: 0; left: 0;
         }
         #canvas {
             display: block;
-            position: absolute;
+            position: fixed;
             top: 0; left: 0;
-            width: 100vw; height: 100vh;
+            width: var(--app-w); height: var(--app-h);
             border: none;
+            touch-action: none;
+            -webkit-touch-callout: none;
+            -webkit-user-select: none;
+            user-select: none;
         }
 
         #status { color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
@@ -49,8 +60,28 @@
             loadGameScript();
         });
 
+        function syncViewport() {
+            var vv = window.visualViewport;
+            var w = (vv && vv.width) || window.innerWidth;
+            var h = (vv && vv.height) || window.innerHeight;
+            var root = document.documentElement;
+            root.style.setProperty('--app-w', Math.round(w) + 'px');
+            root.style.setProperty('--app-h', Math.round(h) + 'px');
+        }
+        syncViewport();
+        // Registered before the game script loads, so the CSS size is updated
+        // before the engine's own resize handler reads it.
+        window.addEventListener('resize', syncViewport);
+        if (window.visualViewport) {
+            window.visualViewport.addEventListener('resize', function () {
+                syncViewport();
+                window.dispatchEvent(new Event('resize'));
+            });
+        }
+
         window.addEventListener("orientationchange", function() {
             setTimeout(() => {
+                syncViewport();
                 window.dispatchEvent(new Event('resize'));
             }, 200);
         });