Экраны и единицы: чем отличаются px, dp, sp и pt

У телефона может быть больше пикселей, чем у ноутбука, но сайт всё равно показывает на нём одну колонку. А на двух мониторах с одинаковым разрешением текст выглядит по-разному. Причина в том, что физический размер экрана, количество пикселей и размеры интерфейса описывают разные вещи.

Чтобы понимать характеристики устройств и делать удобные интерфейсы, полезно разделять эти понятия.

Диагональ, разрешение и плотность

Диагональ показывает физический размер экрана. Её обычно указывают в дюймах: один дюйм равен 2,54 см. Но одной диагонали недостаточно: экраны с разным соотношением сторон при одинаковой диагонали имеют разную ширину и высоту. Соотношение 16:9 означает, что на 16 частей ширины приходится 9 частей высоты.

Разрешение обычно записывают как число пикселей по горизонтали и вертикали. Например, 1920 × 1080 означает примерно 2,07 миллиона пикселей. Эта запись сама по себе ничего не говорит о размере экрана в сантиметрах.

Плотность PPI, pixels per inch, показывает, сколько пикселей помещается на одном дюйме. Для прямоугольного экрана с квадратными пикселями её можно вычислить: извлечь квадратный корень из суммы квадратов ширины и высоты в пикселях, затем разделить результат на диагональ в дюймах.

Например, у 27-дюймового экрана 1920 × 1080 получится около 82 PPI, а у такого же по размеру экрана 3840 × 2160 около 163 PPI. Во втором случае пиксели вдвое плотнее по каждой оси, а всего их вчетверо больше. При сопоставимых условиях это позволяет точнее отображать контуры букв и мелкие детали.

DPI, dots per inch, буквально означает «точек на дюйм». В печати так описывают плотность точек, но термин встречается и в экранных системах. Например, Android использует DPI в параметрах плотности. При этом системная плотность для масштабирования интерфейса может отличаться от физической плотности панели. Параметры плотности Android (EN)

Почему пиксель интерфейса не равен пикселю экрана

Если рисовать кнопку всегда шириной 100 физических пикселей, на более плотном экране она будет физически меньше. Поэтому интерфейсы строят в логических единицах, которые система переводит в пиксели с учётом масштаба.

В Android за базу для dp принята плотность 160 dpi. При системном коэффициенте масштаба 2 элемент шириной 100 dp занимает 200 пикселей. В документации встречается формула px = dp × (dpi / 160): здесь нужна системная плотность, а не PPI из паспорта устройства. В приложении перевод лучше поручать средствам платформы. Единицы Android (EN)

У Apple похожую задачу решают points. Для изображения размером 100 × 100 points при масштабе @2x нужен растр 200 × 200 пикселей, при @3x — 300 × 300. Размер в интерфейсе при этом остаётся 100 × 100 points. Масштаб изображений Apple (EN)

В браузере CSS-пиксель тоже не обязан совпадать с физическим. Их соотношение показывает devicePixelRatio, или DPR. При DPR 2 квадрат 100 × 100 CSS px соответствует 200 × 200 пикселям устройства. Масштабирование страницы может менять DPR, поэтому считать его неизменной характеристикой модели телефона нельзя. CSS-пиксели и DPR (EN)

Даже одинаковое обозначение не гарантирует одинаковый смысл: CSS pt равен 1/72 CSS-дюйма, а CSS-дюйм равен 96 CSS px. Это другая система, чем points в интерфейсах Apple. На экране CSS-сантиметр не обязан совпадать с сантиметром линейки. Единицы CSS (EN)

Масштаб текста нужно учитывать отдельно

Человек может увеличить шрифт, сохранив привычный размер остальных элементов. В Android для этого используют sp. Начиная с Android 14 система поддерживает увеличение шрифта до 200% и применяет нелинейное масштабирование: крупные заголовки и мелкий текст растут с разной скоростью. Пересчитывать sp вручную одним множителем уже недостаточно. Масштабирование шрифтов Android (EN)

В приложениях Apple подстройку текста обеспечивает Dynamic Type; одно лишь указание размера в points её не заменяет. В вебе rem помогает связать размеры с корневым шрифтом: при его размере 16 CSS px значение 1,5 rem составит 24 CSS px. Сам выбор единицы ещё не гарантирует удобства: увеличенный текст должен помещаться в кнопки и переноситься без обрезания. Dynamic Type (EN), относительные единицы CSS (EN)

Интерфейсу нужен размер окна

Деления устройств на маленькие, средние и большие недостаточно. Планшет может открыть приложение на половине экрана, складной телефон изменить доступную область, а браузер работать в узком окне на большом мониторе.

Поэтому современная адаптация опирается на доступные ширину и высоту окна. Например, Android выделяет пять классов ширины с границами 600, 840, 1200 и 1600 dp. В самом узком классе ширина меньше 600 dp, в самом широком начинается от 1600 dp. Это ориентиры для перестройки интерфейса: где оставить одну колонку, а где разместить список и подробности рядом. Это не универсальные границы для всех платформ. Классы размеров окна Android (EN)

Проверять результат стоит при изменении ширины окна, повороте устройства и увеличении текста. Высокое разрешение помогает сделать картинку чёткой; удобный размер элементов и подходящую компоновку нужно обеспечить отдельно.

Подписывайтесь на DIGITAL.ERA в MAX.