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

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

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

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

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

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

Легче на примере, так что если бы кто-нибудь мог объяснить мне, как взять, скажем, иконы в качестве примера.

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

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

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

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