Сохранение размера окна браузера в переменной и его обновление при изменении

Question

Я сохраняю ширину окна в переменной, используя const deviceWidth = window.innerWidth;. Это здорово, однако, я хотел бы, чтобы переменная обновлялась каждый раз, когда пользователь изменяет размер окна. Как это достигается?

Answer 1

Я бы использовал событие изменения размера окна для обновления вашей переменной:

https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event

По сути, вы можете создать функцию, которая запускается при любом изменении размера окна, а затем установить свою переменную.

const heightOutput = document.querySelector('#height');
const widthOutput = document.querySelector('#width');

function reportWindowSize() {
  heightOutput.textContent = window.innerHeight;
  widthOutput.textContent = window.innerWidth;
}

window.onresize = reportWindowSize;

<p>Resize the browser window to fire the <code>resize</code> event.</p>
<p>Window height: <span id="height"></span></p>
<p>Window width: <span id="width"></span></p>

Answer 2

Когда окно меняет размер, оно вызывает событие «изменить размер». Подробности здесь

Вам необходимо прослушать это событие и соответствующим образом обновить вашу переменную. Подробности здесь