- Операторы
- Управляющие инструкции
- JS Объекты
- браузер BOM
- Window
- Navigator
- Screen
- History
- Location
- HTML DOM
- События
- HTML Объекты
- Промисы, async/await
- Сетевые запросы
- Бинарные данные и файлы
- Модули
- Классы
- Разное
Объект Screen
Содержит свойства, описывающие экран и цвета монитора
Создание
Машина выполнения JavaScript создаёт для Вас объект screen. Вы автоматически получаете доступ к его свойствам.
Описание
Этот объект содержит свойства только для чтения (read-only), которые позволяют получить информацию о пользовательском мониторе.
18-04-2020Дополнительно в этот раздел были добавлены свойства, методы и события Fullscreen API и The Screen Orientation API
Свойства
availHeight | Содержит доступную высоту экрана. |
availwidth | Содержит доступную ширину экрана. |
colorDepth | Содержит глубину цвета. |
height | Содержит общую высоту экрана. |
orientation | Возвращает текущую ориентацию экрана. |
pixelDepth | Содержит глубину цвета. |
width | Содержит общую ширину экрана. |
fullscreenElement | Возвращает текущий элемент, отображаемый в полноэкранном режиме, или null, если он не в полноэкранном режиме. |
Обработчик событий
change | Обработчик для событий смены ориентации. |
fullscreenchange | Обработчик для событий смены полноэкранного режима. |
Методы
requestFullscreen() | Открывает элемент в полноэкранном режиме.. |
fullscreenEnabled() | Возвращает true , если доступен полноэкранный режим, в противном случае - false . |
exitFullscreen() | Оменяет элемент в полноэкранном режиме. |
lock() | Блокировка ориентации экрана (работает только в полноэкранном режиме или для установленных приложений). |
unlock() | Разблокировка ориентации экрана (работает только в полноэкранном режиме или для установленных приложений). |
Пример
Функция создаёт строку, содержащую текущие свойства монитора:
function screen_properties() { return "Общий размер: " + screen.width + " x " + screen.height+"\n " + "Доступный размер: " + screen.availWidth + " x " + screen.availHeight+"\n " + "Глубина цвета: " + screen.pixelDepth + ' ( ' + screen.colorDepth + ' )'; } Alert ( screen_properties() );
availHeight
Содержит доступную высоту экрана.
Синтаксис:
screen.availHeight;
Возвращаемое значение
Число - доступная высота экрана, то есть не включает высоту панели задач.
availWidth
Содержит доступную ширину экрана.
Синтаксис:
screen.availWidth;
Возвращаемое значение
Число - доступная ширинв экрана, то есть не включает ширину панели задач, если она расположена вертикально.
colorDepth
Содержит глубину цвета.
Синтаксис:
screen.colorDepth;
Возвращаемое значение
Число - глубина цвета в битах на пиксель
Комментарии
Содержит глубину цвета. Аналогично свойству pixelDepth
height
Содержит общую высоту экрана.
Синтаксис:
screen.height;
Возвращаемое значение
Число - общая высота в пикселях
orientation
Содержит текущую ориентацию экрана.
Синтаксис:
window.screen.orientation;
Возвращаемое значение
Экземпляр ScreenOrientation
, представляющий ориентацию экрана.
Обратите внимание, что более старые версии с префиксом возвращали DOMString, эквивалентный screen.orientation.type
.
portrait-primary
: ориентация в режиме первичного портрета. Для смартфона это означает, что он находится в вертикальном положении, кнопки находятся внизу.portrait-secondary
: ориентация в режиме вторичного портрета. Для смартфона это означает, что он находится в вертикальном положении, кнопки находятся сверху (устройство лежит вверх ногами).landscape-primary
: ориентация в режиме первичного пейзажа. Для смартфона это означает, что он находится в горизонтальном положении, кнопки находятся справа. Это стандартная ориентация для мониторов.landscape-secondary
: ориентация в режиме вторичного пейзажа. Для смартфона это означает, что он находится в горизонтальном положении, кнопки находятся слева.
Но вы также можете отобразить угол ориентации, используя свойство угла: screen.orientation.angle
.
Угол в 0
° соответствует естественной ориентации, которая в основном является «portrait-primary» для смартфонов. 90
° соответствуют «landscape-primary», 180
° - «portrait-secondary» и 270
° - «landscape-secondary». В зависимости от устройства, углы могут обозначать разные ключевые слова.
Пример
var orientation = (screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation; if (orientation === "landscape-primary") { Alert("Это выглядит хорошо."); } else if (orientation === "landscape-secondary") { Alert("Ммм ... экран перевернут!"); } else if (orientation === "portrait-secondary" || orientation === "portrait-primary") { Alert("М-м-м-м ... вы должны повернуть свое устройство в альбомную"); } else if (orientation === undefined) { Alert("API ориентации не поддерживается в этом браузере :("); } Alert(screen.orientation.angle);
pixelDepth
Содержит глубину цвета.
Синтаксис:
screen.pixelrDepth;
Возвращаемое значение
Число - глубина цвета в битах на пиксель
Комментарии
Содержит глубину цвета. Аналогично свойству colorDepth
width
Содержит общую ширину экрана.
Синтаксис:
screen.width;
Возвращаемое значение
Число - общая ширина в пикселях
fullscreenElement
Свойство fullscreenElement возвращает текущий элемент, отображаемый в полноэкранном режиме, или null
, если он не в полноэкранном режиме.
Синтаксис:
document.fullscreenElement;
Для этого свойства требуются определенные префиксы для работы в разных браузерах (в устаревших версиях).
change
обработчик событий, который запускается всякий раз, когда меняет ориентацию.
Синтаксис:
screen.orientation.addEventListener('change', function(e) { ... }) screen.orientation.onchange = function(e) { ... } screen.addEventListener('orientationchange', function(e) { ... }) // устаревшая версмя screen.onorientationchange = function(e) { ... } // устаревшая версмя
fullscreenchange
Событие вызывается сразу после того, как браузер переключается в или из полноэкранного режима.
Синтаксис:
Element.addEventListener('fullscreenchange', function(e) { ... }) Element.onfullscreenchange = function(e) { ... } Element.addEventListener('mozfullscreenchange', function(e) { ... }) // устаревшая версмя FireFox Element.addEventListener('webkitfullscreenchange', function(e) { ... }) // устаревшая версмя Chrome, Safari и Opera Element.addEventListener('msfullscreenchange', function(e) { ... }) // устаревшая версмя IE 11/Edge
Чтобы узнать, входит ли элемент в полноэкранный режим или выходит из него, проверьте значение Document.fullscreenElement: если это значение null
, то элемент выходит из полноэкранного режима, в противном случае он входит в полноэкранный режим.
requestFullscreen()
Метод открывает элемент в полноэкранном режиме.
Синтаксис:
Element.requestFullscreen();
Для этого метода требуются определенные префиксы для работы в разных браузерах (в устаревших версиях).
Пример
<button id='exb' style="cursor:pointer" onclick="yesorno()"></button> <script> var elem=document.documentElement; var yes="Перейти в полноэкранный режим", no="Выйти из полноэкранного режима"; var fsTest = false; if (document.fullscreenEnabled || /* Standard syntax */ document.webkitFullscreenEnabled || /* Chrome, Safari and Opera syntax */ document.mozFullScreenEnabled || /* Firefox syntax */ document.msFullscreenEnabled) /* IE/Edge syntax */ fsTest = true; if (!fsTest) alert("Браузер не поддерживает FullScreen"); function fsElement() {return document.fullscreenElement || /* Standard syntax */ document.webkitFullscreenElement || /* Chrome, Safari and Opera syntax */ document.mozFullScreenElement || /* Firefox syntax */ document.msFullscreenElement; /* IE/Edge syntax */ } function yesorno() { if (fsElement()) fsClose(); else fsOpen(elem);} function fsOpen(elem) { if (elem.requestFullscreen) { elem.requestFullscreen();} else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } /* Firefox */ else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); }/* Chrome, Safari and Opera */ else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); } /* IE/Edge */ } /* Close fullscreen */ function fsClose() { if (document.exitFullscreen) {document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } /* Firefox */ else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } /* Chrome, Safari and Opera */ else if (document.msExitFullscreen) { document.msExitFullscreen(); } /* IE/Edge */ } function fsChange() {document.getElementById("exb").innerHTML = fsElement() ? no : yes;} elem.addEventListener("fullscreenchange", fsChange); elem.addEventListener("mozfullscreenchange", fsChange); /* Firefox */ elem.addEventListener("webkitfullscreenchange", fsChange); /* Chrome, Safari and Opera */ elem.addEventListener("msfullscreenchange", fsChange); /* IE/Edge */ fsChange(); </script>
fullscreenEnabled()
Метод возвращает true
, если доступен полноэкранный режим, в противном случае - false
.
Синтаксис:
document.fullscreenEnabled();
Для этого метода требуются определенные префиксы для работы в разных браузерах (в устаревших версиях).
Возвращаемое значение
Логическое значение, указывающее, можно ли просматривать документ в полноэкранном режиме:
- true
- документ можно просматривать в полноэкранном режиме
- false
- документ нельзя просмотреть в полноэкранном режиме
exitFullscreen()
Метод отменяет элемент в полноэкранном режиме.
Синтаксис:
document.exitFullscreen();
Для этого метода требуются определенные префиксы для работы в разных браузерах (в устаревших версиях).
lock()
Блокировка ориентации экрана (работает только в полноэкранном режиме или для установленных приложений).
Синтаксис:
screen.orientation.lock("Тип блокировки"); screen.lockOrientation(("Тип блокировки"); //устаревшая версмяТип блокировки:
any | natural | landscape | portrait | portrait-primary | portrait-secondary | landscape-primary | landscape-secondary
Пример
Блокировка с помощью lock()
работает только в том случае, если браузер был переключен в полноэкранный режим с помощью requestFullscreen()
. Второе требование тесно связано с первым: поскольку в полноэкранном режиме требуется пользовательский запрос, а не автоматический запуск, это относится и к API ориентации экрана.
Таким образом, вы должны связать вызов обоих методов с событием click
.
document.getElementById ("button").addEventListener ("click", function () { document.documentElement.requestFullScreen (); screen.orientation.lock ( "portrait-primary"); }, false);
unlock()
Разблокировка ориентации экрана (работает только в полноэкранном режиме или для установленных приложений).
Синтаксис:
screen.orientation.unlock(); screen.unlockOrientation(); //устаревшая версмя