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

В JavaScript для определения размеров окна браузера вы можете использовать свойства объекта window. Эти свойства предоставляют информацию о размерах окна браузера, а также другие полезные сведения.

Вот основные свойства, которые вы можете использовать:

innerWidth и innerHeight

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

outerWidth и outerHeight

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

document.documentElement.clientWidth и document.documentElement.clientHeight

Эти свойства также предоставляют ширину и высоту внутренней области окна браузера, но они могут быть полезны, когда объект window недоступен, например, в ситуациях, когда скрипт выполняется в iframe.

document.documentElement.offsetWidth и document.documentElement.offsetHeight

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

Пример использования:

// Получение размеров окна браузера
let windowWidth = window.innerWidth || document.documentElement.clientWidth;
let windowHeight = window.innerHeight || document.documentElement.clientHeight;

let outerWindowWidth = window.outerWidth;
let outerWindowHeight = window.outerHeight;

// Вывод информации в консоль
console.log("Inner width: " + windowWidth + ", Inner height: " + windowHeight);
console.log("Outer width: " + outerWindowWidth + ", Outer height: " + outerWindowHeight);

Обратите внимание, что значения свойств могут быть недоступными или неопределенными в некоторых случаях, например, если скрипт выполняется в контексте iframe или если браузер заблокировал доступ к свойствам окна в целях безопасности.