Размеры экранов и viewport популярных устройств

У экрана два размера, и путают их постоянно. Физические пиксели — то, что написано в характеристиках телефона: 1170×2532. CSS-пиксели — то, по чему работает вёрстка: у того же телефона 390×844.

Отношение между ними — dpr, плотность. У iPhone он 3: один CSS-пиксель рисуется девятью физическими точками, три на три.

Почему это важно на практике. Медиазапрос max-width: 400px сработает на телефоне с «шириной 1170» — потому что для CSS он 390. Тестировщик, который ищет брейкпоинт по числу из спецификации производителя, не найдёт его никогда и заведёт баг на вёрстку.

Обратная сторона: картинка шириной 390 настоящих пикселей на таком экране будет размытой — ей нужно 1170. Отсюда @2x и @3x в макетах.

Полоса прокрутки тоже считается. window.innerWidth её включает, а медиазапрос — нет. Разница 15–17 пикселей на десктопе, и ровно на ней ломается вёрстка, отлаженная «по числу из консоли». В таблице справа обе величины показаны рядом.

Числа из этой таблицы — для режима адаптивности в DevTools: Ctrl+Shift+M в Chrome, там же выбор устройства и ручной ввод размеров.

Но эмуляция — не устройство. Она меняет размер и dpr, а не поведение. На настоящем телефоне отличаются: адресная строка, которая прячется при прокрутке и меняет высоту экрана на ходу; клавиатура, закрывающая половину экрана; отсутствие наведения курсора; инерция прокрутки. Ошибки такого рода эмулятор не покажет.

Высота важнее, чем кажется. Ноутбук 13″ — это 800 пикселей по вертикали, минус вкладки и панель браузера. Первый экран, нарисованный в макете высотой 1080, туда не помещается — а именно на нём стоит главная кнопка.

Проверять стоит и альбомную ориентацию телефона: 844×390 — это ширина планшета при высоте меньше половины ноутбука, и макеты на ней разваливаются чаще всего.