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

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

Массивы — это сложные переменные, которые позволяют нам хранить группы значений под одним именем переменной. Массивы JavaScript могут хранить любое допустимое значение, включая строки, числа, объекты, функции и даже другие массивы, что позволяет создавать более сложные структуры данных, такие как массив объектов или массив массивов. Предположим, вы хотите сохранить название цветов в своем коде JavaScript….

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

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

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

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

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