Как правило, мы хотим получить доступ к объектной модели документа (DOM - Document Object Model), т.к. именно она дает возможность манипулировать элементами на странице. Однако в JavaScript существует возможность получить данные о браузере с помощью другой модели - BOM (Browser Object Model) - объектной модели браузера. BOM отвечает за такие объекты, как Window, Screen, Navigator, Location и History. Каждый из них имеет свои свойства и/или методы, которые вы можете использовать в определенных ситуациях.
В этой статье мы рассмотрим свойства объекта Screen, который, судя по его названию, отвечает за различные параметры экрана. Доступ к этому объекту можно осуществлять так:
1 2 3 |
window.screen.свойство //или 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
:
1 2 3 4 5 |
<div id="screen-demo-wh" class="test"></div> <script> document.getElementById("screen-demo-vh").innerHTML = "Screen width × height: " + screen.width +'×' + screen.height ; </script> |
Смотрим на размеры вашего экрана.
Доступные ширина и высота экрана
Сравните с предыдущими значениями:
Код примера:
1 2 3 4 5 |
<div id="screen-avail-demo" class="test"></div> <script> document.getElementById("screen-avail-demo").innerHTML = "Screen availWidth × availHeight: " + screen.availWidth +'×' + screen.availHeight ; </script> |
Глубина цвета и глубина пикселей экрана
Тут нужно рассмотреть чуть-чуть теории. Современные компьютеры используют 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
.
Код примера:
1 2 3 4 5 |
<div id="screen-depth-demo"></div> <script> document.getElementById("screen-depth-demo").innerHTML = "Screen colorDepth × pixelDepth : " + screen.colorDepth +'×' + screen.pixelDepth; </script> |
Значение цвета в виде #ff3366
(#rrggbb) в системе RGB, используемое в CSS, представляет палитру "True Colors"c глубиной в 24 бита.
Как вы видите, для современных компьютеров значения screen.colorDepth
и screen.pixelDepth
совпадают.
Определение ориентации экрана
Все перечисленные выше свойства существуют и используются в JavaScript достаточно давно. Однако на данный момент уже доступны новые свойства и методы объекта Screen, которые в большей степени нужны для смартфонов или планшетов, а именно:
screen.orientation
- текущая ориентация экрана (альбомная, портретная). Свойствоtype
может иметь такие значения:portrait-primary
: ориентация в режиме первичного портрета. Для смартфона это означает, что он находится в вертикальном положении, кнопки находятся внизу.portrait-secondary
: ориентация в режиме вторичного портрета. Для смартфона это означает, что он находится в вертикальном положении, кнопки находятся сверху (устройство лежит вверх ногами).landscape-primary
: ориентация в режиме первичного пейзажа. Для смартфона это означает, что он находится в горизонтальном положении, кнопки находятся справа. Это стандартная ориентация для мониторов.landscape-secondary
: ориентация в режиме вторичного пейзажа. Для смартфона это означает, что он находится в горизонтальном положении, кнопки находятся слева.
screen.left
- расстояние в пикселях от левой стороны основного экрана до левой стороны текущего экрана;screen.top
- расстояние в пикселях от верхней стороны экрана до текущего экрана;
Мы можем получить значение ориентации нашего устройства:
Код:
1 2 3 4 5 |
<div id="screen-demo-orientation" class="test"></div> <script> document.getElementById("screen-demo-orientation").innerHTML = "Screen orientation: " + window.screen.orientation.type ; </script> |
Методы объекта Screen связаны с изменением ориентации экрана:
screen.lockOrientation()
- блокировка ориентации экрана (работает только в полноэкранном режиме или для установленных приложений)screen.unlockOrientation()
- разблокировка ориентации экрана (работает только в полноэкранном режиме или для установленных приложений).
Например, можно записать строку:
1 2 3 |
window.screen.lockOrientation('portrait'); //или window.screen.lockOrientation('landscape-primary', 'landscape-secondary'); |
Для того чтобы убрать ранее установленную фиксацию ориентации экрана, используют метод unlockOrientation()
. После его вызова можно поворачивать экран смартфона в любом положении. Оба метода возвращают логическое значение: true
в случае успеха операции и false
в противном случае. Учтите, что ваше приложение должно быть в полноэкранном режиме, чтобы эти методы сработали.
Для отслеживания изменения ориентации экрана у объекта Screen существует событие onorientationchange
. Это событие можно использовать для обнаружения изменений ориентации и обновления пользовательского интерфейса.
Практический пример - открываем ссылку на изображение в новом или в модальном окне с определенными размерами
Мы рассмотрим, каким образом можно открыть ссылку на изображение в новом окне, для которого будет заданы размеры, связанные с доступной шириной и высотой экрана (screen.availWidth
, screen.availHeight
). Это новое окно может быть также модальным, т.е. сформированным на основе создания html-элементов в JavaScript. На данный момент большее распространение получил именно второй способ, т.к. браузеры стараются блокировать создание новых окон, в которых чаще всего пользователю показывается реклама. Изображения в примере добавлены с сервиса unsplash.com. Как это сделать, читайте в соответствующей статье.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<style> .test-img { display: inline-block; width: 300px; height: 200px; overflow: hidden; margin-right: 10px; border: 2px solid #ccc; } .red-border {border-color: #e51039; } .blue-border {border-color: #2f92e6; } .test-img img { max-width: 100%; } .bg-modal { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.65); display: flex; justify-content: center; -ms-align-items: center; align-items: center; cursor: pointer; } .bg-modal:before { content: '×'; font-size: 45px; font-weight: bold; color: #fff; display: block; position: absolute; top: 20px; right: 20px; } .control { margin: 10px 0; } </style> <div class="test-screen"> <a href="https://source.unsplash.com/UK78i6vK3sc/900x600" class="test-img"><img src="https://source.unsplash.com/UK78i6vK3sc/300x200" alt="Notebook"></a> <a href="https://source.unsplash.com/r9RmKAe65to/800x500" class="test-img"><img src="https://source.unsplash.com/r9RmKAe65to/300x200" alt="Milk"></a> <a href="https://source.unsplash.com/MxjSV_INz_k/900x900" class="test-img"><img src="https://source.unsplash.com/MxjSV_INz_k/300x200" alt="Milk"></a> <div class="control"> <button class="button button-primary" onclick="func1()">Открыть в новом окне</button> <button class="button button-dangerous" onclick="func2()">Открыть в модальном окне</button> </div> </div> <script> let testImg = document.querySelectorAll('.test-img'); testImg = [].slice.call(testImg); function func1() { testImg.forEach(item => { item.onclick = openImgWindow; item.classList.remove('red-border'); item.classList.add('blue-border') }) } function func2() { testImg.forEach(item => { item.onclick = openImgModal; item.classList.remove('blue-border'); item.classList.add('red-border'); }) } let openImgWindow = function() { let w = screen.availWidth / 2; let h = screen.availHeight / 2; console.log(w, h); let newWin = window.open(this.getAttribute('href'), w, h); newWin.resizeTo(w, h); return false; } function openImgModal(e) { e.preventDefault(); let modal = document.createElement('div'); modal.className = 'bg-modal'; let img = document.createElement('img'); img.src = this.getAttribute('href'); img.width = screen.availWidth / 2; modal.append(img); document.body.append(modal); modal.onclick = function() { this.remove(); } } </script> |
Учтите, что по умолчанию при клике на картинку она будет открываться по ссылке в том же окне, что и данная статья. То есть ссылка будет работать так, как это предусмотрено в спецификации HTML. Только после того, как вы нажмете на одну из кнопок к ссылкам будет добавлен обработчик события клика. Теперь клик на ссылке-картинке приведет к открытию ее в упрощенном модальном окне или в новом окне. Новое окно создается с элементами управления этим окном - заголовком, строкой адреса, и высота этого окна включают эти элементы. На само изображение остается меньше места. В модальном окне изображение будет отмасштабировано в соответствии с размерами вашего экрана. Поэтому, если экран большой, вы можете увидеть изображение несколько более размытым, чем оно есть на самом деле.
Тестируем пример в действии.
Резюме
Объект Screen позволяет получить информацию о параметрах экрана пользователя, просматривающего страницы вашего сайта. Его можно использовать для изменения каких-либо размеров элементов страницы или загружаемого контента (изображения, видео, например), если средствами CSS3 (директивой @media
) это решить не получится. Также для этих целей можно использовать свойства объекта Window innerWidth
и innerHeight
, если вам необходимо использовать не размеры экрана, а размеры страницы.