update

2026-01-13 20:49:05 +03:00
parent 7b09ecbf5b
commit 552caaef53
1 changed files with 49 additions and 29 deletions
--- a/templates/D.html
+++ b/templates/D.html
@@ -94,39 +94,58 @@ body {
 <link rel="apple-touch-icon" href="D.apple-touch-icon.png"/>
 <script src="https://telegram.org/js/telegram-web-app.js?59"></script>
 <script>
-function isTelegram() {
-  return typeof window.Telegram !== "undefined"
-    && window.Telegram.WebApp;
-}
-
-function resizeCanvas() {
-  const canvas = document.getElementById("canvas");
-
-  let width;
-  let height;
-
-  if (isTelegram()) {
-    const tg = window.Telegram.WebApp;
-    tg.expand();
-
-    // ⬅️ КЛЮЧЕВОЕ МЕСТО
-    width = document.documentElement.clientWidth;
-    height = tg.viewportStableHeight;
-  } else {
-    width = document.documentElement.clientWidth;
-    height = document.documentElement.clientHeight;
+(function () {
+  function isTelegram() {
+    return typeof window.Telegram !== "undefined"
+      && window.Telegram.WebApp;
  }

-  canvas.style.width = width + "px";
-  canvas.style.height = height + "px";
-}
+  function getViewportSize() {
+    const root = document.documentElement;

-if (isTelegram()) {
-  Telegram.WebApp.onEvent("viewportChanged", resizeCanvas);
-}
+    // ширина ВСЕГДА из CSS layout
+    const width = root.clientWidth;
+
+    let height;
+    if (isTelegram()) {
+      const tg = window.Telegram.WebApp;
+      tg.expand();
+      height = tg.viewportStableHeight;
+    } else {
+      height = root.clientHeight;
+    }
+
+    return { width, height };
+  }
+
+  function resizeCanvas() {
+    const canvas = document.getElementById("canvas");
+    if (!canvas) return;
+
+    const { width, height } = getViewportSize();
+    const dpr = window.devicePixelRatio || 1;
+
+    // ВАЖНО: internal WebGL resolution
+    canvas.width  = Math.floor(width * dpr);
+    canvas.height = Math.floor(height * dpr);
+
+    // CSS size
+    canvas.style.width  = width + "px";
+    canvas.style.height = height + "px";
+  }
+
+  // Telegram resize
+  if (isTelegram()) {
+    Telegram.WebApp.onEvent("viewportChanged", resizeCanvas);
+  }
+
+  // Browser resize
+  window.addEventListener("resize", resizeCanvas);
+
+  // Initial
+  resizeCanvas();
+})();

-window.addEventListener("resize", resizeCanvas);
-resizeCanvas();
 </script>

 <style>
@@ -146,6 +165,7 @@ canvas {
 }
 </style>

+
 	</head>
 	<body>
 		<canvas id="canvas">