Объект Screen

Содержит свойства, описывающие экран и цвета монитора

Создание

Машина выполнения JavaScript создаёт для Вас объект screen. Вы автоматически получаете доступ к его свойствам.

Описание

Этот объект содержит свойства только для чтения (read-only), которые позволяют получить информацию о пользовательском мониторе.

18-04-2020Дополнительно в этот раздел были добавлены свойства, методы и события Fullscreen API и The Screen Orientation API

Свойства

Обработчик событий

Методы

Пример

Функция создаёт строку, содержащую текущие свойства монитора:

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") {
  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(("Тип блокировки"); //устаревшая версмя

Пример

Блокировка с помощью 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();   //устаревшая версмя