Руководство по объекту window.screen в JavaScript

Объект window.screen содержит информацию об экране пользователя, такую как разрешение (то есть ширина и высота экрана), глубина цвета, глубина пикселей и т. д.

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

Получение ширины и высоты экрана

Вы можете использовать свойства screen.width и screen.height, чтобы получить ширину и высоту экрана пользователя в пикселях. В следующем примере ваше разрешение экрана будет отображаться при нажатии кнопки:

<script>
function getResolution() {
    alert("Your screen is: " + screen.width + "x" + screen.height);
}
</script>
 
<button type="button" onclick="getResolution();">Get Resolution</button>

Получение доступной ширины и высоты экрана

Свойства screen.availWidth и screen.availHeight можно использовать для получения ширины и высоты, доступных браузеру для использования на экране пользователя, в пикселях.

Доступная ширина и высота экрана равна фактической ширине и высоте экрана минус ширина и высота функций интерфейса, таких как панель задач в Windows. Вот пример:

<script>
function getAvailSize() {
    alert("Available Screen Width: " + screen.availWidth + ", Height: " + screen.availHeight);
}
</script>
 
<button type="button" onclick="getAvailSize();">Get Available Size</button>

Получение глубины цвета экрана

Вы можете использовать свойство screen.colorDepth, чтобы получить глубину цвета экрана пользователя. Глубина цвета — это количество битов, используемых для представления цвета одного пикселя.

Глубина цвета показывает, сколько цветов способен воспроизвести экран устройства. Например, экран с глубиной цвета 8 может выдавать 256 цветов (2⁸).

В настоящее время большинство устройств имеет экран с глубиной цвета 24 или 32. Проще говоря, больше битов дают больше цветовых вариаций, например, 24 бита могут создавать 2²⁴ = 16 777 216 цветовых вариаций (true colors), тогда как 32 бита могут создавать 2³² = 4 294 967 296 цветовых вариаций (deep colors).

<script>
function getColorDepth() {
    alert("Your screen color depth is: " + screen.colorDepth);
}
</script>
 
<button type="button" onclick="getColorDepth();">Get Color Depth</button>

Получение глубины пикселя экрана

Вы можете получить глубину экрана в пикселях, используя свойство screen.pixelDepth. Глубина пикселей — это количество битов, используемых аппаратным дисплеем на пиксель.

Для современных устройств глубина цвета и глубина пикселей равны. Вот пример:

<script>
function getPixelDepth() {
    alert("Your screen pixel depth is: " + screen.pixelDepth);
}
</script>
 
<button type="button" onclick="getPixelDepth();">Get Pixel Depth</button>