Определение размеров окна браузера в JavaScript

Быстрый ответ

Чтобы определить ширину и высоту окна просмотра, используйте свойства window.innerWidth и window.innerHeight.

const ширина = window.innerWidth, высота = window.innerHeight;
console.log(`Окно просмотра: ${ширина} x ${высота}`); // Выводим размеры окна просмотра в консоль

Вникаем в детали

Браузеры и их особенности

В разных браузерах присутствуют свои специфические особенности, которые стоит учесть, чтобы точно определить размеры окна просмотра:

• Стандартный режим: используйте свойства document.documentElement.clientWidth и document.documentElement.clientHeight.
• Режим квирков: применяйте свойства document.body.clientWidth и document.body.clientHeight.

const ширина = document.compatMode === "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth; // Учитываем особенности браузеров
const высота = document.compatMode === "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight; // Готовимся ко всему

Подробнее об этом расскажет наш спикер на видео

Масштабирование в мобильных браузерах

В мобильных браузерах размеры окна просмотра могут изменяться в зависимости от уровня масштабирования и настроек initial-scale. Учтите это при отладке на мобильных устройствах.

Отклонение в один пиксель

Браузеры обрабатывают пиксели специфическим образом, поэтому возможно небольшое отклонение в 1px. Это не считается ошибкой — это особенность работы браузеров.

Визуализация

Представьте, что браузер — это картина в раме:

Ширина (📏) — это горизонтальный размер самой рамы, в которую помещена картина. Высота (📐) — это вертикальный размер рамы, ограничивающий верхнюю и нижнюю границы картины.

Когда вы изменяете размеры окна браузера (рамы), содержимое страницы (картина) соответствующим образом подстраивается:

// Размеры имеют значение...
const ширина = window.innerWidth; // ...для ширины
const высота = window.innerHeight; // ...и для высоты

Свойства innerWidth и innerHeight помогают отслеживать изменения размеров окна браузера.

Дополнительные инструменты для достижения абсолютной точности

Некоторые библиотеки обеспечивают дополнительный контроль за размерами окна просмотра, особенно там, где стандартные средства JavaScript могут быть недостаточными:

• Verge: Предоставляет последовательность и кроссбраузерность при получении размеров окна просмотра, несмотря на внутренние различия.
• Actual: Использует matchMedia для точных измерений.

Если вы используете jQuery, можете использовать $(window).width() и $(window).height() — jQuery сам позаботится о совместимости с различными браузерами.

Адаптивность — наш ответ изменениям

Адаптивный веб-дизайн требует приспосабливания содержимого сайта к изменениям размеров окна просмотра. Для этого можно добавить обработчик события, который будет отслеживать эти изменения:

window.addEventListener('resize', function() {
  const новаяШирина = window.innerWidth;
  const новаяВысота = window.innerHeight;
  // Время для адаптивной магии!
});

Это позволяет дизайну всегда оставаться актуальным и комфортным для пользователя, вне зависимости от размеров его окна просмотра.

Полезные материалы

1. Свойство Window: innerWidth – Web APIs | MDN
2. Свойство Window: innerHeight – Web APIs | MDN
3. Типографика, зависящая от размера вьюпорта | CSS-Tricks
4. javascript – Как узнать размер экрана, текущей веб-страницы и окна браузера – Stack Overflow
5. Адаптивный веб-дизайн и окно просмотра
6. Тонкости использования единиц вьюпорта на мобильных устройствах | CSS-Tricks
7. Создание пропорциональных соотношений для видео – A List Apart