Всем привет! В данной статье мы рассмотрим работу с объектом screen в javascript. С помощью этого объекта мы можем получить информацию о текущих параметрах экрана. Итак, поехали!

Параметры экрана мы можем получить через свойства объекта screen.

Допустим мы хотим узнать ширину и высоту экрана.

screen.width // получаем ширину

screen.height //получаем высоту

Как видите здесь все элементарно. C помощью свойства width объекта screen мы получаем ширину, а с помощью height высоту. Если сказать проще, то благодаря совокупности данных параметров мы получили разрешение экрана.

Стоит отметить что все свойства объекта screen предназначены только для чтения. Поменять напрямую (screen.width = 500) мы их не можем.

Следующие два свойства availWidth и availHeight похожи на предыдущие.

screen.availWidth

screen.availHeight

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

Изменение разрешения экрана мы можем отслеживать через событие onresize.

window.onresize = function(event) {
   console.log(screen.availWidth)
};

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

Еще одним удобным и полезным свойством является orientation.

screen.orientation.type

Как вы наверное догадались оно указывает ориентацию экрана. Используется как правило для мобильных устройств. Изменение ориентации экрана вы также можете отслеживать через событие onresize:

window.onresize = function(event) {
   alert(screen.orientation.type)
};

Свойство colorDepth возвращает глубину цвета экрана.

screen.colorDepth

Как правило данное свойство редко используется. Лично я ему применение до сих пор не нашел, может быть вам повезет больше.

Вот в принципе мы рассмотрели все основные свойства объекта screen.

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

вк.

Желаю вам успехов и удачи! Пока.