Разрешение экрана: CSS-пиксели, DPR и viewport простыми словами

Откройте инструмент Какое у меня разрешение экрана на 4K-мониторе — и с большой вероятностью увидите 2560 × 1440. Или 1920 × 1080. В панели 3840 × 2160 физических пикселей, вы за них заплатили, но браузер сообщает меньше. Никто вас не обманывает. Просто считают разное.

CSS-пиксели — не аппаратные пиксели

Когда экраны стали плотными, операционные системы начали масштабировать интерфейс, чтобы текст оставался читаемым. Windows со 150% масштабом, macOS на любом Retina-экране — обе сообщают браузеру уменьшенное, «комфортное» число: CSS-пиксели. 27-дюймовый 4K-монитор при 150% отчитывается как 2560 × 1440. Панель MacBook Air с 2560 × 1664 — как 1280 × 832.

Мост между этими числами — device pixel ratio: сколько физических пикселей приходится на один CSS-пиксель. При DPR 2 каждый CSS-пиксель рисуется блоком 2 × 2 аппаратных, поэтому текст на Retina выглядит «вырезанным», а не «напечатанным». Телефоны доводят это до 3. Инструмент показывает ваш DPR и умножает обратно — видно и число, с которым работают сайты, и число с коробки монитора.

Отсюда же «слишком большие» скриншоты. Программы снимков экрана захватывают физические пиксели, поэтому на масштабированном дисплее файл получается в 1,5–2 раза крупнее, чем выглядит рабочий стол.

Разрешение, доступная область, viewport — три разных прямоугольника

От большего к меньшему:

• разрешение экрана — весь дисплей в CSS-пикселях;
• доступная область — то, что осталось после операционной системы: стандартная панель задач Windows превращает 1920 × 1080 в 1920 × 1040;
• viewport — часть окна браузера, в которую страница реально может рисовать, без панелей инструментов и полос прокрутки.

Адаптивная вёрстка реагирует только на третий. Медиазапросу min-width: 768px всё равно, что у вас ультраширокий монитор — важно, насколько широко окно прямо сейчас. Поэтому «мобильная» вёрстка может появиться и на 34 дюймах: вы просто сузили окно за брейкпоинт.

Инструмент обновляется при каждом изменении размера окна, так что найти точный пиксель, на котором сайт перещёлкивается в планшетную вёрстку, — дело секунд. Тянете край, смотрите на viewport, готово. Дефолты Tailwind для справки: 640, 768, 1024, 1280, 1536.

Какие цифры встречаются в реальности

По мировой статистике StatCounter за 2025 год на десктопе лидирует 1920 × 1080 — примерно пятая часть всего трафика, а 1366 × 768 всё ещё держится, хотя ноутбуки с ним давно не выпускают. На телефонах чаще всего сообщается 360 × 800 — звучит крошечно, пока не вспомнишь, что это CSS-пиксели устройства с DPR 3, то есть само стекло — 1080 × 2400.

Я этой страницей регулярно проверяю две вещи: договорился ли внешний монитор о родном разрешении (док-станции любят молча откатиться на 1080p) и какой DPR у конкретного ноутбука — прежде чем искать баг с «мыльной» картинкой, который обычно оказывается отсутствующим 2×-ассетом.

Пара слов о глубине цвета

Почти каждый экран сообщает 24 бита — по восемь на красный, зелёный и синий, около 16,7 млн оттенков. Некоторые HDR-панели отдают 30. Если видите 24 — всё в порядке, это стандарт, вокруг которого построен веб.

Читается локально, никуда не отправляется

Всё на странице берётся из объектов window и screen вашего же браузера: JavaScript читает значения и показывает их на месте. Ни один запрос не покидает устройство, страница работает и с выключенным Wi-Fi.

Откройте Какое у меня разрешение экрана — и когда баг-репорт в следующий раз попросит разрешение, DPR и размер окна, скопируйте всё из одного места.