На этом уроке мы познакомимся с объектом screen, который может использоваться для получения информации об экране пользователя.

Назначение объекта screen

Объект screen - это один из дочерних объектов window, который может предоставить некоторую информацию об экране пользователя. Доступ к данному объекту осуществляется как к свойству объекта window, т.е. через точку.

window.screen

Для получения различных характеристик экрана пользователя объект screen предоставляет для разработчика JavaScript следующие свойства: screen.width, screen.height, screen.availWidth, screen.availHeight, screen.colorDepth.

Свойства width и height объекта screen

Свойства screen.width и screen.height возвращают соответственно ширину и высоту экрана пользователя в пикселях.

Например, вывести в элемент div ширину и высоту экрана пользователя:

<div id="userScreen" class="alert alert-warning"></div>
<script>
var userScreen;
userScreen = "Ширина экрана пользователя: <strong>" + screen.width + "</strong>";
userScreen += "<br />";
userScreen += "Высота экрана пользователя: <strong>" + screen.height + "</strong>";
window.document.getElementById("userScreen").innerHTML = userScreen;
</script>

JavaScript - свойства width и height объекта screen

Свойства availWidth и availHeight объекта screen

Свойства screen.availWidth и screen.availHeight возвращают ширину и высоту, которое может занять окно браузера. Например, в операционной системе Windows свойство screen.availHeight равно разнице между высотой экрана и высотой "Панели задач".

Например, вывести в элемент div доступную ширину и высоту экрана пользователя:

<div id="availSizeWindow" class="alert alert-warning"></div>
<script>
var availSizeWindow;
availSizeWindow = "Доступная (свободная) ширина экрана: <strong>" + screen.availWidth + "</strong>";
availSizeWindow += "<br />";
availSizeWindow += " Доступная (свободная) высота экрана: <strong>" + screen.availHeight + "</strong>";
window.document.getElementById("availSizeWindow").innerHTML = availSizeWindow;
</script>

JavaScript - свойства availWidth и availHeight объекта screen

Свойство colorDepth объекта screen

Свойства screen.colorDepth возвращает количество бит, которые требуются для отображения одного цвета.

Например, вывести в элемент div качество цветопередачи устройства пользователя:

<div id="colorDepth" class="alert alert-warning"></div>
<script>
var colorDepth;
colorDepth = "Качество цветопередачи: <strong>" + screen.colorDepth + "</strong>";
window.document.getElementById("colorDepth").innerHTML = colorDepth;
</script>

JavaScript - свойство colorDepth объекта screen