Итак, в прошлой части мы выяснили, что если растровое изображение «привязать» к физическим пикселям, то оно будет выглядеть по-разному на разных устройствах: например, размеры картинки на HD и Full HD разрешениях будут отличаться.
Также выяснили, что элементы интерфейса мобильного браузера, тем не менее, имеют на разных устройствах одинаковый или, — если быть совсем точными и как мы увидим далее, — близкий размер.
Как же этого добиваются в огромном зоопарке устройств (смартфоны, планшеты) с различными разрешениями и размерами экрана?
Очевидно, что была необходимость придумать решение, которое не будет зависеть от физического разрешения матрицы. И такое решение придумали — это аппаратно-независимый пиксель (device-independent pixel — dip или dp).
Что же это такое — 1 dp? Посмотрим на примере наших смартфонов (Sony Xperia Z и Honor 4c, если кто забыл).
На одной и той же ширине экрана умещаются 1080 или 720 физических пикселей, а это значит, что физический пиксель у Сони будет меньше, чем у Хонора. Чтобы понять насколько, сравним одинаковые по размеру кусочки матрицы:
Видно, что при одной и той же площади у Сони большее количество пикселей — 12×6 против 8×4 у Хонора.
Поделим эти кусочки на одинаковые квадраты следующим образом:
Назовем получившийся квадрат виртуальным пикселем или 1 dp. Тогда у обоих смартфонов будет одно и то же количество виртуальных пикселей — 4×2 dp. Это и есть нужное нам решение:
Если размер интерфейса задавать в виртуальных пикселях dp, то он будет иметь одинаковый или близкий размер на различных устройствах вне зависимости от физического разрешения матриц.
Посмотрим, как это реализуется в жизни. Для этого сравним между собой размеры кнопки переключения между вкладками в мобильном Хроме …
… на наших смартфонах, отличающихся, напомню, физическим разрешением матриц:
Сони — 1920×1080 и Хонор — 1280×720
В виртуальных пикселях толщина линии одинакова для обоих устройств и равна 2 dp, однако в пикселях растрового изображения — различна: 6 px для Сони и 4 px для Хонора.
Обратите внимание, что виртуальный пиксель потому и называется «виртуальным» — физически его не существует.
Изображение по-прежнему выводится пикселями матрицы, но у каждого экрана появляется так называемое пиксельное отношение (pixel ratio) — количество физических пикселей по ширине (или высоте), помещающихся в одном виртуальном.
Чтобы узнать размер экрана в dp необходимо размер в физических пикселях разделить на пиксельное отношение:
Теперь понятно, почему виртуальный пиксель еще называют аппаратно-независимым (device-independent pixel — dip или dp). Одинаковое виртуальное разрешение наших смартфонов 360×640 dp не зависит от физического разрешения матрицы.
Физическое и виртуальное разрешения экрана, а также их pixel ratio можно найти в гугловской таблице популярных устройств:
Пиксельное отношение на этом сайте обозначают словом density (англ. — плотность, густота), что верно передает суть происходящего: «густота» реальных пикселей в виртуальном.
Рассмотрим таблицу повнимательнее. Некоторые устройства имеют то же виртуальное разрешение, что и наши 5-дюймовые смартфоны, но отличаются от них размерами диагонали — от 4.3 до 5.2 дюймов:
Именно поэтому выше я писал «интерфейс имеет одинаковый или близкий размер на различных устройствах».
Тем, кто не нашел в этом списке свой любимый телефон или планшет, предлагаю узнать параметры его экрана на специально созданной мною странице определения разрешения экрана и видов пикселей.
Для этого откройте страницу на своем мобильном устройстве. Вот что, например, показывает Хонор (при повороте экрана цифры ширины и высоты автоматически пересчитываются):
Еще раз вспомним, что виртуальный пиксель физически не существует, поэтому пиксельное отношение не обязательно должно быть целым числом:
Наконец, pixel ratio больше единицы бывает не только у мобильных устройств.
Взгляните: два Макбука с одинаковыми по размеру 13-дюймовыми экранами, которые отличаются друг от друга только разрешениями и пиксельными отношениями. Это те самые «большие» экраны из первой части статьи.
Макбук Эйр оснащен обычным экраном: pixel ratio у него равно 1, физический и виртуальный пиксели совпадают. У Макбук Про экран ретиновый (retina display) с пиксельным отношением равным 2.
Итак, у каждого экрана есть такой параметр, как пиксельное отношение (pixel ratio) — количество физических пикселей по ширине (или высоте), помещающихся в одном аппаратно-независимом или виртуальном пикселе.
Будет логичным предположить, что у мобильного браузера будет такое же виртуальное разрешение, как у экрана устройства. Так ли это, узнаем в следующей части.
