В то время, когда я пишу эту статью, в начале 2013 года, нет никакого способа проектирования для сети, по параметрам физических данных мобильных устройств, и не будет в течение еще очень долгого времени. Но есть способ проектирования, зная физические характеристики устройства, или, по крайней мере, появится в самом ближайшем будущем.
Различные мобильные устройства могут иметь схожие разрешение экрана, но совершенно различные физические параметры. Ipad (1-го поколения) имеет диагональ 9.7″, разрешение 1024 × 768. Клавиатура Kindle 3G имеет диагональ 6″, а также разрешение 768 × 1024.
Это называется “разрешение media query”, разрешения всегда были в спецификации media query. Тем не менее, тот факт, что оно было в спецификации, не значит, что кто-то на самом деле реализовал его. К счастью, WebKit рассказывает, как эта функция должна быть реализована. Как же мы будем использовать это разрешение? Ниже я расскажу об этом подробнее.
Тонкая линия между запросами
Во-первых, я считаю что существует только один прецедент для разрешения media query. И будет он выглядеть следующим образом:
@media (min-resolution: 250dpi) { } И этот вариант можно применить для замены изображений с низким разрешением на аналогичные с высоким. Я пытался придумать для каких еще целей его можно использовать, но безрезультатно. Мы разрабатываем продукты для людей, должны ли мы задумываться о физической стороне человеческого потребления информации и о проектирование, использующем этот вид метрики? И в идеальном мире мы могли бы просто сказать width:1in и использовать однодюймовый элемент, независимо от мобильного устройства. К сожалению, мы живем в мире, в котором физические и цифровые пиксели не совпадают. Нам нужно что-то, чтобы преодолеть этот разрыв. Это что-то и есть разрешение media query.
А теперь позвольте мне показать вам, как этот маленький кусочек кода может привести к значительно отличающимся результатам.
Давайте сравним два media query фрагмента:
@media (min-resolution: 341dpi) and (min-width: 767px) > { } и
@media (max-resolution: 131dpi) and (min-width: 767px) > { } На первый взгляд, различий вроде бы и нет, не так ли? Неправильно. Числа, которые я использовал, подходят для HTC Windows Phone 8X (первый фрагмент) и Ipad 2 (второй фрагмент). С помощью разрешения media query, можно отделить небольшие мобильные устройства от больших.
Однако, запрос, который выглядит как @media (min-width: 767px){ } повлияет и на HTC, и на iPad, без возможности другого разделения, потому что оба мобильных устройства имеют разрешение 768 пикселей в ширину. В самом деле, IPad имеет более низкое разрешение, 1024 × 768, в то время как разрешение HTC составляет 1280 × 768. Если вы еще не поняли, основная проблема состоит в том, что IPad является 10-дюймовым устройством, в то время как HTC имеет 4, 3 дюйма, что составляет меньше половины размера IPad.
Используя media query разрешение и запрос ширины, мы можем различать физически малые и большие мобильные устройства для регулировки элементов дизайна и макетов наших мобильных продуктов. Как отмечалось выше, мы в первую очередь интересуемся не разрешением экрана. И так как мы используем логические точки останова в отзывчивом дизайне, важно знать открывается ли сайт с экрана большого размера или с экрана маленького размера. Но где же провести черту между малыми и крупными мобильными устройствами? Имея большой опыт в разработках продуктов для мобильных устройств различных размеров, я сделал несколько расчетов и разработал теорию, которая должна дать вам более четкое представление о том, как это работает.
Физический размер запроса моей теории (PSINet)
Вот теория: в комбинированном запросе, есть соотношение между меньшей шириной и высотой и разрешением, которое называется оценка PSINET. Если этот уровень, выше,чем 5, то это очень большое мобильное устройство. Если полученная оценка меньше, чем 5, то это физически небольшое мобильное устройство. Устройства, с оценкой, близкой к 5, считаются средними, близкими по размеру к физическому размеру листа бумаги формата А4 (21 × 29,7 см).
Вот неполный список устройств проверенных согласно описанной выше теории. Я перечислил оценки каждого мобильного устройства в соответствии с формулой, а также добавил такие параметры, как диагональ, разрешение и плотность.
Физически большие мобильные устройства
| название Устройства | Диагональ (дюймы) | разрешение | PPI | PSINet оценка |
|---|---|---|---|---|
| Apple iMac | 27 | 2560 × 1440 | 109 | 13.00 |
| Sony Vaio F | 16.4 | 1920 × 1080 | 134 | 8.05 |
| Apple MacBook Pro RD | 13 | 2560 × 1600 | 227 | 7.04 |
Физически маленькие мобильные устройства
| название устройства | Диагональ (Дюймы) | Resolution | PPI | PSINetоценка |
|---|---|---|---|---|
| Sony PSP | 4.3 | 480 × 272 | 128 | 3 … Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров Comments are closed. |