Что такое информация об экране и области просмотра?
Каждый браузер предоставляет объект screen и область просмотра. screen.width и screen.height показывают дисплей в CSS-пикселях, а innerWidth и innerHeight — текущую область просмотра, то есть видимую часть без панелей. devicePixelRatio сообщает, сколько физических точек приходится на один CSS-пиксель, а colorDepth — сколько бит описывают каждый пиксель.
Пример: ноутбук с физической матрицей 2560x1600 и devicePixelRatio 2 показывает screen.width=1280 и screen.height=800 CSS-пикселей — именно эти размеры вы указываете в медиазапросе. colorDepth 24 означает 8 бит на канал, то есть 2^24 = 16 777 216 цветов. Если innerWidth больше innerHeight, устройство в альбомной ориентации; поменяйте значения местами — и она станет портретной.
Как читать отчёт об экране
- Откройте страницу — инструмент мгновенно считает значения из браузера и ничего не отправляет на сервер.
- Сравните размер экрана и размер окна, чтобы понять, сколько места занимают панели.
- Проверьте соотношение пикселей, чтобы решить, нужны ли графике варианты для Retina.
- Следите, как значения меняются при изменении размера окна или повороте устройства.
Экран и область просмотра — частые вопросы
Чем отличается размер экрана от размера окна?
screen.width показывает весь дисплей в CSS-пикселях, а innerWidth — только видимую область просмотра, поэтому панели и боковые блоки уменьшают её. Медиазапросы реагируют на область просмотра, а не на экран.
Что означает соотношение пикселей устройства?
Это число физических пикселей на один CSS-пиксель. Коэффициент 2 (типичен для Retina и многих телефонов) означает, что рамка 10px рисуется 20 физическими пикселями, поэтому изображения нужны в двойном размере.
Почему глубина цвета обычно 24 или 30?
24 бита — это 8 бит на каналы красного, зелёного и синего, то есть 16 777 216 цветов. Панели 30-бит (10 бит на канал) дают более плавные градиенты для HDR, но браузер или драйвер могут ограничить сообщаемое значение.
