Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

Объект screen в javascript

Всем привет! В данной статье мы рассмотрим работу с объектом 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.

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

вк.

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

Оцените статью

Еще статьи

Скрытие и отображение элементов в JQuery

Работа с историей браузера в HTML5.

htaccess запретить доступ к директории

Переменные окружения в PHP

html полный экран

goto метки в php

Модуль requests в python3

Коллекции в javascript

Модуль pyperclip в python

Комментарии

Проверочный код

В данном разделе пока нет комментариев!

История

    ПОДПИСКА

    • Подпишись и получай информацию о выходе новых статей на почту! Просто введите свою почту, нажмите кнопку подписаться. На почту должно будет прийти сообщение с потверждением подписки. Если сообщение не пришло проверьте раздел спам или попробуйте другую почту. Также по всем техническим проблемам вы можете написать в поддержку

    НОВОСТИ

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