Как определить ширину окна браузера с помощью JavaScript

Для получения ширины текущего окна браузера используйте свойство window.innerWidth. Этот показатель включает внутреннюю ширину области отображения страницы, исключая полосу прокрутки и границы окна.

Пример получения ширины окна

const ширинаОкна = window.innerWidth;
console.log("Ширина окна браузера:", ширинаОкна, "пикселей");

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

Чтобы автоматически отслеживать изменение ширины, подключите обработчик события resize.

window.addEventListener('resize', () => {
const текущаяШирина = window.innerWidth;
console.log("Обновленная ширина окна:", текущаяШирина, "пикселей");
});

Обратите внимание

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

Дополнительные свойства

1. window.outerWidth: ширина окна вместе с рамками и рамками окна браузера.
2. document.documentElement.clientWidth: ширина контента, без полос прокрутки.

Используйте window.innerWidth для получения актуальной ширины области просмотра, которая нужна для адаптивных и динамических элементов интерфейса. В сочетании с событиями resize это позволит обеспечить корректную работу сайта на любых устройствах и при изменении размеров окна.