Разрешения и размеры экранов устройств

Логическое и физическое разрешение, DPR

У каждого современного экрана есть два разрешения. Физическое разрешение — это реальное количество пикселей, встроенных в панель, например 1179 × 2556 у iPhone 15. Логическое (CSS) разрешение — это меньшее пространство координат, в котором строится вёрстка веб-страницы, например 393 × 852. Соотношение пикселей устройства (DPR) связывает их: это физическое разрешение, делённое на логическое, поэтому DPR, равный 3, означает, что телефон рисует блок 3 × 3 реальных пикселя на каждый CSS-пиксель. Экраны телефонов и ноутбуков высокой плотности («Retina») используют DPR 2 или 3 для чёткого отображения текста и изображений, тогда как у типичного монитора настольного компьютера DPR равен 1, и один CSS-пиксель соответствует одному физическому пикселю.

Почему дизайнеры работают в размерах вьюпорта

При создании адаптивной вёрстки медиазапросы и брейкпоинты CSS измеряются в CSS-пикселях — логическом вьюпорте, а не в физических пикселях панели. Телефон, физическая ширина которого составляет 1080 пикселей, всё равно сообщает вьюпорт всего 360–414 CSS-пикселей, поэтому брейкпоинт в 360px для мобильных устройств охватывает большинство Android-телефонов. Проектирование под вьюпорт, а не под исходное разрешение, сохраняет одинаковый физический размер текста и элементов управления на устройствах с очень разной плотностью пикселей, поэтому одна и та же вёрстка выглядит правильно и на ноутбуке с низкой плотностью, и на плотном флагманском телефоне.

Как читать эту таблицу

• Вьюпорт (CSS px) — это логический размер, который видит веб-страница; указан в естественной ориентации устройства — портретной для телефонов и планшетов, альбомной для ноутбуков и мониторов.
• Физическое разрешение — это истинное количество пикселей панели, значение, которое указывается в технических характеристиках.
• DPR (соотношение пикселей устройства) умножает вьюпорт до физического разрешения; любое значение выше 1 означает дисплей высокой плотности.
• Соотношение сторон — это форма экрана: от вытянутого 19.5:9 у современных телефонов до 16:9 у большинства мониторов и 21:9 и 32:9 у широкоформатных экранов.
• Строки ноутбуков и 4K-мониторов отражают стандартный уровень масштабирования дисплея по умолчанию, поэтому вьюпорт может быть меньше нативного разрешения панели.

Размеры меняются с каждой моделью

Воспринимайте эти значения как практический справочник, а не как гарантию. Производители пересматривают размеры экранов почти в каждом новом поколении — только у iPhone в последних моделях встречались вьюпорты шириной 375, 390, 393, 402, 414, 430 и 440 CSS-пикселей, — а устройства на Android различаются ещё сильнее. Масштабирование дисплея в операционной системе снова меняет сообщаемый вьюпорт: ноутбук с экраном 1080p на Windows при масштабе 150% ведёт себя как экран 1280 × 720 с DPR 1.5. Самое надёжное значение — всегда то, которое сообщает ваш собственный браузер, поэтому подходящее устройство выше определяется в реальном времени по данным вашего экрана.