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

Используйте свойство window.innerWidth и window.innerHeight

Для определения текущих размеров видимой части окна браузера используйте window.innerWidth и window.innerHeight. Эти свойства возвращают ширину и высоту области просмотра в пикселях, исключая полосы прокрутки и интерфейсные элементы браузера.

Пример:

const ширинаОкна = window.innerWidth;
const высотаОкна = window.innerHeight;
console.log('Размер окна:', ширинаОкна, 'x', высотаОкна);

Отследите изменение размеров окна при помощи события resize

Обработчик события resize вызывает функцию каждый раз, когда пользователь меняет размеры окна. Это позволяет динамически обновлять параметры или адаптировать интерфейс.

Пример реализации:

window.addEventListener('resize', () => {
const ширина = window.innerWidth;
const высота = window.innerHeight;
// Здесь можно обновить элементы страницы или выполнить другие действия
console.log('Обновленные размеры:', ширина, высота);
});

Используйте document.documentElement.clientWidth и clientHeight

document.documentElement содержит размеры области просмотра, которые исключают полосы прокрутки.

Пример:

const ширина = document.documentElement.clientWidth;
const высота = document.documentElement.clientHeight;
console.log('Размеры через document.documentElement:', ширина, высота);

Что учитывать при определении размеров окна

• window.innerWidth и window.innerHeight учитывают полосы прокрутки, если они видимы.
• document.documentElement.clientWidth и clientHeight исключают полосы прокрутки и показывают размеры области, доступной для содержимого.
• Обработчика resize необходимо добавлять, чтобы отслеживать изменения размеров при динамическом изменении окна.
• Для получения максимально точных данных выбирайте свойство, подходящее под конкретную задачу.