Объект 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.

  1. portrait-primary: ориентация в режиме первичного портрета. Для смартфона это означает, что он находится в вертикальном положении, кнопки находятся внизу.
  2. portrait-secondary: ориентация в режиме вторичного портрета. Для смартфона это означает, что он находится в вертикальном положении, кнопки находятся сверху (устройство лежит вверх ногами).
  3. landscape-primary: ориентация в режиме первичного пейзажа. Для смартфона это означает, что он находится в горизонтальном положении, кнопки находятся справа. Это стандартная ориентация для мониторов.
  4. 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") {
  console.log("Это выглядит хорошо.");
} else if (orientation === "landscape-secondary") {
  console.log("Ммм ... экран перевернут!");
} else if (orientation === "portrait-secondary" || orientation === "portrait-primary") {
  console.log("М-м-м-м ... вы должны повернуть свое устройство в альбомную");
} else if (orientation === undefined) {
  console.log("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();   //устаревшая версмя

Справочник JavaScript