Объект 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 цветов (28).

В настоящее время большинство устройств имеет экран с глубиной цвета 24 или 32. Проще говоря, больше битов дают больше цветовых вариаций, например, 24 бита могут создавать 224 = 16 777 216 цветовых вариаций (true colors), тогда как 32 бита могут создавать 232 = 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>

На данный момент практически каждый дисплей компьютера и телефона использует 24-битную глубину цвета. 24 бита почти всегда используют 8 бит каждого из R, G, B. В то время как в 32-битной глубине те же 24 бита используются для цвета, а оставшиеся 8 бит для прозрачности.

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

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

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

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

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.