Веб-дизайн для смартфона - размер пикселя

Мне нужно, чтобы кто-то помог прояснить мое понимание размера пикселей на новых телефонах с экранами высокой плотности. Так как он бросает мяч кривой в мой веб-дизайн.

Мое первоначальное понимание смартфонов состояло в том, что размер пикселя был примерно 480 х 320, что упрощало проектирование, поскольку пиксели были все еще одинаковыми пикселями.

Однако некоторые смартфоны удваивают (или больше), чем это. Я считаю, что iPhone действительно удваивается при 960 x 640. Мой Galaxy Nexus составляет 1280 x 720.

Теперь это работает отлично при использовании%. Тем не менее, есть много вещей, для которых я хотел использовать значения пикселов fix. Например, многие значения высоты не должны находиться в% s. Кроме того, если высота фиксирована, некоторые элементы, такие как логотип, значки, некоторые изображения, я не хочу, чтобы их растягивали, когда ширина расширяется... так что для этого потребуется согласованное значение.

Однако как я могу справиться с этим, когда пиксель не является действительно последовательным физическим измерением?

Это проще при использовании примера, поэтому, если кто-то может объяснить это мне, скажем, например, иконки.

Когда я вхожу в Facebook на своем телефоне, я вижу эти три значка уведомлений на панели навигации (запросы друзей, сообщения и другое). Они исправлены. Имею ли я свой телефон в вертикальном положении или на нем, они остаются точно такого же размера. Единственное, что меняется с шириной, это пробел между... по существу, для чего я работаю.

Каким будет измерение на этих значках? Во-первых, я знаю, что стандартный значок обычно 16x16. Таким образом, они должны быть 32x32 на этих смартфонах с высокой плотностью? Тем не менее, они также не кажутся такими же размерами, как мои значки 16x16, которые я вижу на своем рабочем столе. Они выглядят более 12x12, возможно. Итак, не уверен, но я думаю, что для смартфонов есть другой "стандартный" размер значка, а затем для настольных компьютеров (что бы это было?).

В любом случае, у меня уже есть CSS, определяющий, что для достижения моего мобильного макета используется мобильный телефон. Тем не менее, должен ли я пойти дальше, чтобы узнать плотность пикселей и затем скорректировать мои фиксированные значения в данном случае, в два раза? Или есть другой/лучший способ?

Приветствуется всяческая помощь. Я немного в тупике, и там на самом деле нет большой информации об этом. Спасибо и извините за длинный пост!

Ответ 1

Список плотности пикселей для устройств: http://www.binvisions.com/articles/tablet-smartphone-resolutions-screen-size-list/ Ваша проблема, вероятно, является изменением в соотношении.

Вот хорошая статья, посвященная некоторым отзывчивым исследованиям, которые я лично хотел бы упомянуть

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Пропуск до конца; например, дисплей iPhone 4 Retina - это вдвое меньшая плотность пикселей, и вот пример из вышеприведенной статьи о таргетинге (не протестирован) http://thomasmaier.me/blog/2010/06/23/css-for-iphone-4-retina-display/

и еще одна статья, дающая немного информации о том, чтобы сделать 2 изображения с разными ppi http://bjango.com/articles/designingforretina/

Я лично использую Twitter Bootstrap и его адаптивный плагин для компоновки дизайна с использованием CSS: http://twitter.github.com/bootstrap/scaffolding.html#responsive