Всё, что браузер может рассказать о вашем дисплее — разрешение, частота обновления, плотность пикселей и цвет, — определяется в момент загрузки страницы. Ничего устанавливать не нужно, и данные не покидают ваше устройство.
Разрешение вашего экрана —
Место, которое сайт реально получает в окне браузера, — обновляется при изменении размера окна.
Обновляется в момент поворота устройства.
Откройте эту страницу — и цифры выше уже ваши: браузер читает их прямо с дисплея, без запросов разрешений, и никуда не отправляет. Вот что каждая из них означает.
Разрешение — это число точек-пикселей, которыми экран рисует изображение: 1920 × 1080 — Full HD, 3840 × 2160 — 4K. Система увеличивает интерфейс, чтобы текст оставался читаемым, поэтому браузер часто оперирует меньшим числом; эта страница пересчитывает его обратно и показывает настоящую цифру панели. Если она всё равно ниже обещанной на коробке, дело почти всегда в масштабировании системы или увеличении страницы в браузере.
Плотность пикселей показывает, сколько настоящих пикселей экрана рисуют каждую точку изображения. Значение 2× и выше Apple называет Retina, а все остальные — HiDPI: текст выглядит заметно чётче. Промежуточные значения вроде 1,25× или 1,5× обычно означают масштабирование в Windows, которое делает всё на экране комфортно крупнее. Именно поэтому ноутбук с 4K-экраном может честно сообщать разрешение 1920 × 1080.
Область просмотра — часть окна браузера, в которой страница может что-то нарисовать: экран минус панели инструментов, панель задач и соседние окна. Веб-разработчики ориентируются именно на эту цифру, а не на сам экран, поэтому она обновляется на лету при изменении размера окна.
Частота обновления — сколько раз в секунду экран перерисовывает изображение, измеряется в герцах. 60 Гц — давний стандарт, а 120 Гц и выше делают прокрутку и игры заметно плавнее. Цифра выше — быстрая оценка по таймингу анимации; отдельный тест частоты обновления измеряет её точно и замечает, когда быстрая матрица зажата на 60 Гц.
Глубина цвета — это число бит на пиксель: 24 бита дают около 16,7 миллиона цветов, а панели с 30 битами — больше миллиарда, отчего градиенты выглядят глаже. Цветовой охват — диапазон цветов, который экран способен показать: sRGB — базовый стандарт веба, а Display P3 или Rec. 2020 означают экран с широким охватом. Поддержка HDR определяется отдельно и раскрывает яркие света в фильмах и играх, которые её поддерживают.
Ориентация — это просто ответ на вопрос, шире экран, чем выше, или наоборот. На телефонах и планшетах она меняется на лету при повороте устройства; на компьютере — когда монитор переводят в портретный режим в настройках дисплея, что любят программисты и все, кто читает длинные документы.
Браузер сообщает, реагирует ли экран на касания и сколько пальцев он отслеживает одновременно — большинство сенсорных экранов справляются с десятью. Ноль на ноутбуке с сенсорным экраном обычно означает, что драйвер сенсора отключён или браузер его игнорирует.