Обнаружение изменений размера экрана в JavaScript: методы и примеры

Чтобы обнаружить изменения размера экрана в JavaScript, вы можете использовать несколько методов. Вот несколько вариантов:

  1. Событие изменения размера окна: вы можете прослушивать событие resizeв объекте window. Это событие срабатывает всякий раз, когда изменяется размер окна браузера, что указывает на изменение размера экрана. Например:
window.addEventListener('resize', function() {
  // Screen size has changed
});
  1. Window MatchMedia: метод window.matchMedia()позволяет определять медиа-запросы и проверять, соответствуют ли они текущему размеру экрана. Он возвращает объект MediaQueryList, который можно использовать для прослушивания изменений. Вот пример:
var mq = window.matchMedia('(min-width: 768px)');
function handleScreenSizeChange(mq) {
  if (mq.matches) {
    // Screen size is at least 768px
  } else {
    // Screen size is less than 768px
  }
}
mq.addListener(handleScreenSizeChange);
  1. Медиа-запросы CSS. Вы можете определить медиа-запросы CSS в своих таблицах стилей и использовать JavaScript, чтобы проверить, применяется ли определенное правило CSS. Это может указывать на изменение размера экрана. Вот пример:
function handleScreenSizeChange() {
  if (window.getComputedStyle(document.body).getPropertyValue('font-size') === '16px') {
    // Screen size has changed
  }
}
window.addEventListener('resize', handleScreenSizeChange);

Это всего лишь несколько методов обнаружения изменений размера экрана в JavaScript. Вы можете выбрать тот, который лучше всего соответствует вашим потребностям, исходя из ваших конкретных требований.