Представьте, что вы в макете нарисовали кнопку 20 x 60 px, а разработчик затем задал её размер в коде приложения в пикселях. Физический размер вашей кнопки теперь будет сильно различаться в зависимости от того, на каком устройстве запущено приложение.
Почему так? Предположим, у вас есть два устройства А и Б с экраном одинаковой диагональю в 4,5 дюймов. Но устройство А имеет плотность экрана 160 ppi и разрешение 360 x 640 px, а устройство Б — 320 ppi и разрешение 720 x 1280 px соответственно.
Выходит, что ваша кнопка будет выглядеть в два раза крупнее на устройстве А, чем на устройстве Б. Это происходит потому, что при том же физическом размере на экране Б помещается больше пикселей, чем на экране А. Их больше, они физически меньше и расположены плотнее.
Для того, чтобы решить проблему масштабирования интерфейса, в iOS верстке стали использовать величину pt (points). 1 pt приняли равным 1 px при просмотре на оригинальном первом iPhone, где плотность экрана была 163 ppi.
С выходом новых версий iPhone с разными разрешениями экранов и экранов Retina, iOS научили преобразовать pt в px таким образом, чтобы кнопка выглядела одинаково, независимо от того, сколько пикселей помещается на дюйм экрана. В основе лежат эти формулы:
<aside>
📌 px = pt * round (ppi_экрана / 163)
</aside>
<aside>
📌 pt = px / round (ppi_экрана / 160)
</aside>
Возьмем, к примеру, новый iPhone 14. Разрешение его экрана 1170 x 2532 px, а плотность 460 ppi. Получим, 1 * round (460 / 163) = 3. Выходит, что 1 pt на экране iPhone 14 физически равен 3 px. Получается, что в pt экран этого гаджета будет равен 1170 / round (460 / 163) = 390 и 2532 / round (460 / 163) = 844, то есть 390 x 844 pt.
Мы рисуем свои макеты для усредненной модели iPhone X, чье разрешение экрана равно 1125 x 2436 px при 458 ppi. Путем вычислений получим наши привычные 375 x 812 pt.
Если вы поэкспериментируете с вычислениями для разных моделей, то вы увидите, что в результате вычислений чаще всего на 1 pt получается значение 1, 2 или 3 пикселя. Для удобства в iOS добавили модификатор, который назвали Scale Factor. Он бывает @1x, @2x и @3x соответственно.
Модификатор служит для упрощения вычислений (устройству на уровне конфигурации прошивки сразу присваивается Scale Factor), а также с помощью него в проекте приложения отмечаются графические asset’ы (иконки, иллюстрации, фото) и iOS понимает, какой asset использовать на этом устройстве (например, чтобы на Retina-экране iPhone 14 использовалась иконка в @3x разрешении).
<aside> 📌 Поэтому, когда вы делаете скриншот приложения на своем iPhone и вставляете его в Figma для сверки верстки, вам нужно смасштабировать его в соответствии со Scale Factor вашего экрана. Проще говоря, вам нужно поделить высоту и ширину скриншота на 1, 2 или 3. Тогда ваш макет и скриншоты станут одного масштаба и производить сравнение отступов\размеров станет комфортнее.
</aside>
Посмотреть размер экрана в pt и Scale Factor для вашей модели iPhone можно тут:
iOS Resolution Display properties of every iPhone, iPad and iPod touch Apple ever made
В Android механизм работы аналогичен механизму iOS, однако он более расширенный в силу того, что эта операционная система работает на очень широком спектре устройств с абсолютно разными экранами: от смартфона, до умного холодильника.
Разработчики Android ввели величину dp\dip (density-independent pixel). 1 dp приняли равным 1 px при просмотре на первом Android-гаджете HTC Dream, где плотность экрана была равна 160 dpi (ppi и dpi синонимы, просто в Android называют иначе).