Объект Screen в JavaScript – информация об экране

В этой статье мы рассмотрим:
- что такое объект «
window.screen
» и зачем он нужен, его основные свойства; - событие
change
, которое возникает при изменении ориентации экрана, а также как назначить обработчик для этого события; - примеры с объектом
screen
и событиемchange
.
Доступ к объекту screen и его свойства
Объект screen
предназначен для получения информации об экране, на котором отображается текущее окно браузера.
Обратиться к нему можно как к свойству объекта window
:
const screenObj = window.screen;
Также к объекту screen можно получить доступ без указания window
, т.е. так:
const screenObj = screen;
С помощью объекта screen
мы можем получить следующую информацию об экране:
width
– ширина экрана в пикселях;height
– высота экрана в пикселях;availWidth
– доступная ширина экрана;availHeight
– доступная высота экрана (например, в Windows, эта высота равна общей высоте из которой нужно вычесть высоту панели задач);availLeft
– x-координата первого доступного пикселя;availTop
– y-координата первого доступного пикселя;colorDepth
– глубину цвета в битах;pixelDepth
– глубину цвета на пиксель экрана в битах;orientation
– ориентация экрана.
В screen.orientation
:
type
– тип ориентации (одно из следующих значений: «portrait-primary
», «portrait-secondary
», «landscape-primary
» или «landscape-secondary
»);angle
- угол ориентации документа.
При изменении ориентации экрана возникает событие change
.
Назначить обработчик для этого события можно следующим образом:
// посредством метода addEventListener
screen.orientation.addEventListener('change', function(e) { ... })
// через свойство onchange
screen.orientation.onchange = function(e) { ... }
Пример, в котором выведем в документ информацию об экране
Начнём разработку примера с создания разметки.
Выполним её в виде маркированного списка:
<ul>
<li>Ширина экрана: <span id="screen-width"></span></li>
<li>Высота экрана: <span id="screen-height"></span></li>
<li>Доступная ширина экрана: <span id="screen-avail-width"></span></li>
<li>Доступная высота экрана: <span id="screen-avail-height"></span></li>
<li>x-координата первого доступного пикселя: <span id="screen-avail-left"></span></li>
<li>y-координата первого доступного пикселя: <span id="screen-avail-top"></span></li>
<li>Качество цветопередачи: <span id="screen-color-depth"></span></li>
<li>Глубина цвета на пиксель экрана: <span id="screen-pixel-depth"></span></li>
<li>Тип ориентации экрана: <span id="screen-orientation-type"></span></li>
<li>Угол ориентации документа: <span id="screen-orientation-angle"></span></li>
</ul>
Напишем код на JavaScript для получения данных об экране и вывода их в соответствующие элементы span
.
// получим значения
const screenWidth = screen.width;
const screenHeight = screen.height;
const screenAvailWidth = screen.availWidth;
const screenAvailHeight = screen.availHeight;
const screenAvailLeft = screen.availLeft;
const screenAvailTop = screen.availTop;
const screenColorDepth = screen.colorDepth;
const screenPixelDepth = screen.pixelDepth;
const screenOrientationType = screen.orientation.type;
const screenOrientationAngle = screen.orientation.angle;
// найдем элементы и установим им в качестве контента полученные значения
document.querySelector('#screen-width').textContent = screenWidth;
document.querySelector('#screen-height').textContent = screenHeight;
document.querySelector('#screen-avail-width').textContent = screenAvailWidth;
document.querySelector('#screen-avail-height').textContent = screenAvailHeight;
document.querySelector('#screen-avail-left').textContent = screenAvailLeft;
document.querySelector('#screen-avail-top').textContent = screenAvailTop;
document.querySelector('#screen-color-depth').textContent = screenColorDepth;
document.querySelector('#screen-pixel-depth').textContent = screenPixelDepth;
document.querySelector('#screen-orientation-type').textContent = screenOrientationType;
document.querySelector('#screen-orientation-angle').textContent = screenOrientationAngle;
В этом скрипте получение элемента по id
осуществляем с помощью метода querySelector
, а установку ему текстового содержимого посредством свойства textContent
.

Пример, в котором цвет фона body будет зависеть от ориентации экрана
Создадим пример, в котором назначим обработчик событию change
для объекта screen.orientation
. Данное событие будет отслеживать изменение ориентации, и запускать обработчик каждый раз когда оно будет происходить. В качестве обработчика будет выступать функция onChange
. Эта функция в зависимости от типа ориентации экрана будет менять цвет фона элемента body
и устанавливать в качестве его содержимого значение свойства screen.orientation.type
:
// функция onchange
function onChange() {
switch (screen.orientation.type) {
case ('portrait-primary'):
case ('portrait-secondary'):
// установим цвет фона body равным #f44336, если тип ориентации экрана portrait-primary или portrait-secondary
document.body.style.backgroundColor = '#f44336';
break;
case ('landscape-primary'):
case ('landscape-secondary'):
// установим цвет фона body равным #4caf50, если тип ориентации экрана landscape-primary или landscape-secondary
document.body.style.backgroundColor = '#4caf50';
break;
}
// установим в качестве контента body значение свойства screen.orientation.type
document.body.textContent = screen.orientation.type;
}
// вызовем функцию onChange
onChange();
// назначим обработчик onChange событию change для screen.orientation
screen.orientation.addEventListener('change', onChange);
Отображение страницы на экране смартфона, который имеет ориентацию landscape:

Отображение информации об screen.orientation.type
на экране смартфона с ориентацией portrait:
