JavaScript | Как получить разрешение экрана (монитора) в браузере?

Когда мы говорим о HTML в контексте JavaScript, то подразумеваем объекты, которые описывают HTML-элементы. Такое описание называется объектной моделью документа — DOM (Document Object Model).

Когда мы говорим о CSS в контексте JavaScript, то подразумеваем объекты, которые описывают CSS-таблицы. Такое описание называется объектной моделью каскадных таблиц стилей — CSSOM (Cascading Style Sheets Object Model)

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

CSS — это язык для описания рендеринга структурированных документов (таких как HTML и XML) на экране, на бумаге, в речи и т. д..

В официальной документации из организации «w3c» существует специальный документ, который называется «CSSOM View Module«. В этом документе описывается модуль обзора (вида).

Документ поделён на описание различных интерфейсов. Одним из них является интерфейс «Screen«. Как следует из названия, интерфейс «Screen» представляет информацию об экране устройства вывода.

Чтобы получить доступ к информации о мониторе (о устройстве вывода) браузера, нужно обратиться к одноимённому ключу у глобального объекта JavaScript.

window.screen

Это выражение вернёт нам объект экрана.

Получили объект Screen в консоли браузера - JavaScript — Получили объект Screen в консоли браузера — JavaScript

Из консоли браузера можно сразу обращаться к свойству «screen«, без «window» так как поиск идентификаторов привязки будет сразу попадать в ключи глобального объекта.

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

Для получения ширины монитора в пикселях мы используем: