Неккоректная ширина на телефоне в веб браузере (JS)

Question

При загрузки окна js вычисляет ширину окна, после чего устанавливает ширину canvas в два раза больше.
На десктопе всё работает ровно так, как я и ожидал:

Однако на телефоне я получил неожиданный результат:

Возможно, это связано с какими-то ограничениям на ширину в мобильных веб браузерах, однако мне так и не удалось решить эту проблему. Попытки установить свойства max-width в body/canvas ни к чему не привели.

window.onload = () => {
  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext('2d');


  canvas.width = window.innerWidth * 2;
  canvas.height = window.innerHeight;

  console.log("Canvas width: " + canvas.width);
  console.log("Window width: " + window.innerWidth);
}

body {
  margin: 0;
}

canvas {
  overflow-x: visiable;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Игра</title>
</head>

<body id>
  <canvas id="myCanvas"></canvas>
</body>
<script src="script.js"></script>

</html>

Answer 1

Проблема решена.

Как я понял, в мобильной версии веб браузера js получает ширину окна ещё до того, как само окно было полностью загружено. Хотя это странно, ведь скрипт начинает работать только лишь после загрузки окна.

Так или иначе. Моё решение заключается в постоянном получении значений ширины (и высоты) окна в цикле рисования:

function draw() {
  canvas.width = window.innerWidth * 2;
  canvas.height = window.innerHeight;
  ...
}

... 

setInterval(draw, 200);

Ну или через использование requestAnimationFrame, но это уже другая история.

БЛОГ НА HUSL

Неккоректная ширина на телефоне в веб браузере (JS)

Ответы (1 шт):