Ширина страницы js

Question

Получаю некорректную ширину страницы в js скрипте. Приведу пример:
Скрипт в js файле

window.addEventListener("resize", function() {
  console.log(window.innerWidth);
});

Стиль в css

@media (max-width: 990px){
  body{
    background-color: red;
  }
}

И типовой пустой скелет html документа.
Проблема проявляется следующим образом. Открываю страницу в devtools в "device" режиме. По одному пикселю уменьшаю ширину и смотрю вывод скрипта в Console вкладке. Начиная с 991px до 987px получаю такой вывод: на ширине 989px в браузере js выводит ширину 990px, хотя css стиль сработал правильно и закрасил все в красный.

По итогу стили уже применились, а код, например, в if(ширина < 990) не сработает. Пробовал вместо window.innerWidth поставить document.documentElement.clientWidth. Результат не изменился. Новичок в js и вебе в целом. Что я упускаю из виду?

Answer 1

Если речь идет о "синхронизации" CSS и JS в плане использования соответсвтующих правил, то предлагаю через CSS-variable менять значение переменной, а в JS считывать это значение и реагировать соответствующим образом.

window.addEventListener('resize', checkWidth);
checkWidth();

function checkWidth() {
  console.clear();
  console.log(getComputedStyle(document.documentElement).getPropertyValue('--is-thewidth'));
}

:root {
  --is-thewidth: moreThan990;
}

@media (max-width: 990px) {
  :root {
    --is-thewidth: lessThan990;
  }
  body {
    background-color: red;
  }
}

Answer 2

Благодаря комментарию @DiD, немного понял ситуацию. Если использовать для определения ширины:

document.documentElement.getBoundingClientRect().width

, то результат будет с дробной частью. Если уменьшать ширину экрана по 1 пикселю, то примерно каждый 4-ый пиксель будет с дробной частью > 0.5.

Судя по всему, window.innerWidth округляет это значение и выдает ширину на 1 пиксель больше фактического. Это и было "багом" описанным в вопросе.

БЛОГ НА HUSL

Ширина страницы js

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