Как определить ширину окна браузера быстро и просто.1
Используйте JavaScript для получения текущей ширины окна браузера. Это самый быстрый и точный способ узнать размер окна в момент обращения.
Код для определения ширины окна браузера
const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
console.log('Ширина окна:', width + 'px');
Объяснение работы кода
- window.innerWidth – возвращает ширину внутренней области окна, включая прокрутку полос.
- document.documentElement.clientWidth – берет ширину для документа, исключая полосы прокрутки, которая может быть более точной в некоторых ситуациях.
- document.body.clientWidth – применяется в старых браузерах или при определенных условиях, когда остальные методы недоступны.
Практическое применение
- Добавьте данный код внутрь скрипта на странице.
- Используйте полученное значение для адаптации элементов интерфейса, например, скрытия или отображения меню.
- Задавайте обработчик событий resize, чтобы автоматически узнавать ширину при изменении размера окна.
Обработчик изменения размера окна
window.addEventListener('resize', () => {
const currentWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
// используйте currentWidth для действий
console.log('Обновленная ширина:', currentWidth + 'px');
});
Такой подход позволяет оперативно получать актуальные данные о ширине окна и адаптировать интерфейс без задержек и лишних сложных решений.