Как правило, мы хотим получить доступ к объектной модели документа (DOM - Document Object Model), т.к. именно она дает возможность манипулировать элементами на странице. Однако в JavaScript существует возможность получить данные о браузере с помощью другой модели - BOM (Browser Object Model) - объектной модели браузера.  BOM отвечает за такие объекты, как Window, Screen, Navigator, Location и History. Каждый из них имеет свои свойства и/или методы, которые вы можете использовать в определенных ситуациях.

В этой статье мы рассмотрим свойства объекта Screen, который, судя по его названию, отвечает за различные параметры экрана. Доступ к этому объекту можно осуществлять так:

Свойства объекта Screen

Методов у объекта Screen нет, а список свойств представлен ниже:

  • screen.width - ширина экрана в пикселях;
  • screen.height - высота экрана в пикселях;
  • screen.availWidth - доступная ширина экрана в пикселях (как правило, совпадает со screen.width, если вы не перенесли панель задач вправо или влево);
  • screen.availHeight - высота экрана в пикселях минус высота пользовательских элементов интерфейса (чаще всего панель задач в Windows);
  • screen.colorDepth - глубина цвета экрана;
  • screen.pixelDepth - количество битов на пиксель экрана

Все свойства предназначены только для чтения, т.е. вы получаете значения различных свойств, но сами установить их не можете, т.к. экран вашего компьютера/ноутбука/смартфона - это то, что предоставил вам его производитель. Кроме того, имейте ввиду, что JavaScript всегда работает в браузере клиента, т.е. читая эту статью, вы получаете разрешение своего экрана. Давайте посмотрим на некоторые значения вашего экрана, определяемые с помощью объекта Screen.

Ширина и высота экрана

Выведем в div c id="screen-demo-wh" значения screen.width и screen.height:

Смотрим на размеры вашего экрана.

Доступные ширина и высота экрана

Сравните с предыдущими значениями:

Код примера:

Глубина цвета и глубина пикселей экрана

Тут нужно рассмотреть чуть-чуть теории. Современные компьютеры используют 24-битное или 32-битное оборудование для цветового разрешения:

24 бита = 16 777 216 различных "истинных цветов" (True Colors)
32 бита = 4 294 967 296 различных "глубоких цветов" (Deep Colors)

В более старых мониторах использовалось 16 бит: 65 536 "высоких цветов" (High Colors).

Очень старые компьютеры и старые сотовые телефоны использовали 8 бит: 256 разных "цветов VGA" (VGA colors).

Для определения глубины пикселей вашего экрана используем свойство screen.colorDepth, для определения глубины пикселей - свойство  screen.colorDepth.

Код примера:

Значение цвета в виде #ff3366 (#rrggbb) в системе RGB, используемое в CSS, представляет палитру "True Colors"c глубиной в 24 бита.

Как вы видите, для современных компьютеров значения screen.colorDepth и screen.pixelDepth совпадают.

Определение ориентации экрана

Все перечисленные выше свойства существуют и используются в JavaScript достаточно давно. Однако на данный момент уже доступны новые свойства и методы объекта Screen, которые в большей степени нужны для смартфонов или планшетов, а именно:

  1. screen.orientation - текущая ориентация экрана (альбомная, портретная). Свойство type может иметь такие значения:
    • portrait-primary: ориентация в режиме первичного портрета. Для смартфона это означает, что он находится в вертикальном положении, кнопки находятся внизу.
    • portrait-secondary: ориентация в режиме вторичного портрета. Для смартфона это означает, что он находится в вертикальном положении, кнопки находятся сверху (устройство лежит вверх ногами).
    • landscape-primary: ориентация в режиме первичного пейзажа. Для смартфона это означает, что он находится в горизонтальном положении, кнопки находятся справа. Это стандартная ориентация для мониторов.
    • landscape-secondary: ориентация в режиме вторичного пейзажа. Для смартфона это означает, что он находится в горизонтальном положении, кнопки находятся слева.
  2. screen.left - расстояние в пикселях от левой стороны основного экрана до левой стороны текущего экрана;
  3. screen.top - расстояние в пикселях от верхней стороны экрана до текущего экрана;

Мы можем получить значение ориентации нашего устройства:

Код:

Методы объекта Screen связаны с изменением ориентации экрана:

  • screen.lockOrientation() - блокировка ориентации экрана (работает только в полноэкранном режиме или для установленных приложений)
  • screen.unlockOrientation() - разблокировка ориентации экрана (работает только в полноэкранном режиме или для установленных приложений).

Например, можно записать строку:

Для того чтобы убрать ранее установленную фиксацию ориентации экрана, используют метод unlockOrientation(). После его вызова можно поворачивать экран смартфона в любом положении. Оба метода возвращают логическое значение: true в случае успеха операции и false в противном случае. Учтите, что ваше приложение должно быть в полноэкранном режиме, чтобы эти методы сработали.

Для отслеживания изменения ориентации экрана у объекта Screen существует событие onorientationchange. Это событие можно использовать для обнаружения изменений ориентации и обновления пользовательского интерфейса.

Практический пример - открываем ссылку на изображение в новом или в модальном окне с определенными размерами

Мы рассмотрим, каким образом можно открыть ссылку на изображение в новом окне, для которого будет заданы размеры, связанные с доступной шириной и высотой экрана (screen.availWidth, screen.availHeight). Это новое окно может быть также модальным, т.е. сформированным на основе создания html-элементов в JavaScript. На данный момент большее распространение получил именно второй способ, т.к. браузеры стараются блокировать создание новых окон, в которых чаще всего пользователю показывается реклама. Изображения в примере добавлены с сервиса unsplash.com. Как это сделать, читайте в соответствующей статье.

Учтите, что по умолчанию при клике на картинку она будет открываться по ссылке в том же окне, что и данная статья. То есть ссылка будет работать так, как это предусмотрено в спецификации HTML. Только после того, как вы нажмете на одну из кнопок к ссылкам будет добавлен обработчик события клика. Теперь клик на ссылке-картинке приведет к открытию ее в упрощенном модальном окне или в новом окне. Новое окно создается с элементами управления этим окном - заголовком,  строкой адреса, и высота этого окна включают эти элементы. На само изображение остается меньше места. В модальном окне изображение будет отмасштабировано в соответствии с размерами вашего экрана. Поэтому, если экран большой, вы можете увидеть изображение несколько более размытым, чем оно есть на самом деле.

Тестируем пример в действии.

Notebook Milk Milk

Резюме

Объект Screen позволяет получить информацию о параметрах экрана пользователя, просматривающего страницы вашего сайта. Его можно использовать для изменения каких-либо размеров элементов страницы или загружаемого контента (изображения, видео, например), если средствами CSS3 (директивой @media ) это решить не получится. Также для этих целей можно использовать свойства объекта Window innerWidth и innerHeight, если вам необходимо использовать не размеры экрана, а размеры страницы.

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *