Особенности адаптивного дизайна. Часть 2

12 июля 2017 года

Итак, в прошлой части мы выяснили, что если растровое изображение «привязать» к физическим пикселям, то оно будет выглядеть по-разному на разных устройствах: например, размеры картинки на 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) — количество физических пикселей по ширине (или высоте), помещающихся в одном аппаратно-независимом или виртуальном пикселе.

Будет логичным предположить, что у мобильного браузера будет такое же виртуальное разрешение, как у экрана устройства. Так ли это, узнаем в следующей части.

Поделиться
Плюсануть
Отправить