Скрини
Что показывает этот тест
- Разрешение экрана — размер рабочего стола ОС в логических пикселях. Зависит от настроек масштабирования.
- Окно браузера — видимая область вкладки (без адресной строки и панелей). Меняется при изменении размера окна.
- Device Pixel Ratio (DPR) — отношение физических пикселей к логическим. На Retina — 2, на обычных — 1.
- Физическое разрешение — реальные пиксели матрицы монитора: screen.width × DPR.
- Соотношение сторон — 16:9, 16:10, 21:9 и т.д., вычисляется через НОД.
- Глубина цвета — количество бит на пиксель (обычно 24 бит = 16.7 млн цветов).
- Ориентация — альбомная (landscape) или книжная (portrait). Актуально для мобильных устройств.
- Масштаб браузера — приближение в браузере (Ctrl+/Ctrl−). 100% — стандарт; больше — увеличено.
Почему разрешение меньше заявленного
При включённом масштабировании в ОС (125%, 150%, 200%) логическое разрешение уменьшается. Например, 4K-монитор (3840×2160) при масштабе 150% в Windows покажет 2560×1440 — именно это значение сидит в браузере. Физическое разрешение матрицы всё равно 3840×2160, просто ОС его «делит».
Зачем знать разрешение
- Разработчикам — CSS медиа-запросы, @2x картинки, viewport мета-тег.
- Дизайнерам — макеты для разных разрешений, экспорт в правильном масштабе.
- Стримерам и видеографам — настройка OBS/Streamlabs, запись в нативном разрешении.
- При покупке монитора — сравнить фактическое разрешение с заявленным.