17.07.2025, 06:29

Как определить ширину окна браузера быстро и просто.1

Используйте JavaScript для получения текущей ширины окна браузера. Это самый быстрый и точный способ узнать размер окна в момент обращения.

Код для определения ширины окна браузера

const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
console.log('Ширина окна:', width + 'px');

Объяснение работы кода

  • window.innerWidth – возвращает ширину внутренней области окна, включая прокрутку полос.
  • document.documentElement.clientWidth – берет ширину для документа, исключая полосы прокрутки, которая может быть более точной в некоторых ситуациях.
  • document.body.clientWidth – применяется в старых браузерах или при определенных условиях, когда остальные методы недоступны.

Практическое применение

  1. Добавьте данный код внутрь скрипта на странице.
  2. Используйте полученное значение для адаптации элементов интерфейса, например, скрытия или отображения меню.
  3. Задавайте обработчик событий resize, чтобы автоматически узнавать ширину при изменении размера окна.

Обработчик изменения размера окна

window.addEventListener('resize', () => {
const currentWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
// используйте currentWidth для действий
console.log('Обновленная ширина:', currentWidth + 'px');
});

Такой подход позволяет оперативно получать актуальные данные о ширине окна и адаптировать интерфейс без задержек и лишних сложных решений.