Атрибут onresize тега <body>

Описание

Атрибут onresize позволяет задать JavaScript-код, который выполняется при изменении размеров окна браузера. Это событие полезно для создания адаптивных интерфейсов, которые должны реагировать на изменение доступного пространства.

Пример использования:
<body onresize="handleWindowResize()"> <div id="size-info"></div> <script> function handleWindowResize() { const width = window.innerWidth; const height = window.innerHeight; document.getElementById('size-info').innerHTML = ` Ширина окна: ${width}px
Высота окна: ${height}px `; // Адаптивные действия if (width < 768) { document.body.classList.add('mobile-view'); } else { document.body.classList.remove('mobile-view'); } } // Вызываем сразу при загрузке handleWindowResize(); </script> </body>

Ключевые свойства:

Свойство Описание
window.innerWidth Ширина области просмотра (включая scrollbar)
window.innerHeight Высота области просмотра (включая scrollbar)
window.outerWidth Ширина всего окна браузера
window.outerHeight Высота всего окна браузера

Рекомендации по использованию:

  • Используйте для сложной адаптивной логики, которую нельзя реализовать на CSS
  • Оптимизируйте обработчик - избегайте тяжелых вычислений
  • Для плавности используйте debounce/throttle
  • Сочетайте с CSS media queries
  • Тестируйте на реальных устройствах

Важные замечания:

  • Событие срабатывает многократно при изменении размеров
  • На мобильных устройствах может вести себя неожиданно
  • При повороте устройства срабатывает несколько раз
  • Не используйте для критически важного функционала
  • Для большинства случаев лучше подходят медиазапросы CSS

Оптимизация производительности:

  • Минимизируйте количество DOM-операций
  • Избегайте forced reflows (чтение layout-свойств)
  • Используйте requestAnimationFrame
  • Для сложных вычислений - Web Workers
  • Отключайте обработчик когда не нужен

Примечание: Для большинства задач адаптивного дизайна предпочтительнее использовать CSS Media Queries. JavaScript-обработчики resize стоит применять только для сложных случаев, которые невозможно реализовать средствами CSS.