Такая задача, всё чаще вызывающая натыкание. Есть сайт, адаптированный под обычные гуанодисплеи низкого разрешения. 96dpi en masse. Смайлики 16x16 px и т.п.
Но нужно показывать на мобильных девайсах. Где размеры среднелопатные несколько дюймов, зато 300..400+ dpi. Показывать нужно так, чтобы одна и та же страница без перевёрстывания показывалась нормально и на большом экране низкого разрешения и на мелком высокого.
Что касается вёрстки/дизайна вопросов нет. Всё решается легко.
Что касается шрифтовых иконок — тут тоже всё более-менее. Можно привязаться к размеру шрифта, иконки там примитивные, в низком разрешении показываются хорошо.
С иконками/смайликами/превьюшками же начинается засада. Скажем, SVG для смайликов. Можно, например, в миллиметрах размер указать. Но SVG паршиво аккуратно рендерится в мелкие картинки под 16x16px. Ещё хуже с растровой графикой.
Тут появляется интересная возможность масштабирования картинок в CSS3. Пишешь для hi-res дисплея что-то типа
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
-webkit-transform: scale(2);
transform: scale(2);
И готово. Для обычного разрешения, где эта фигня не используется, показывается растр натурального размера, для высокого разрешения — размер удваивается. В 90% случаев этого достаточно для приличного отображения. Для совсем высокого разрешения можно и добавить scale.
Но тут вылезает другая засада. Масштабирование осуществляется в рамках заложенного с html плейсхолдера o_O То есть пишем width=«16» height=«16» — опаньки, размер в пикселах останется тем же, тупо картинка вылезает за пределы положенной вёрстки.
Вижу навскидку два решения, но оба некрасивые. Во-первых, можно через JS в таком случае менять атрибуты тега img после загрузки. Это ужасно. Второй вариант чуть лучше, не писать вообще width/height, а использовать типовые картинки, с размерами, заложенными в CSS. Это в целом нормально, но проблемы будут с картинками произвольных размеров. Хотя и тут есть дополнительные обходные пути, типа новых возможностей обрезки через CSS в рамки типовых плейсхолдеров (или даже чисто серверная подготовка).
В общем, задача пока не решена и я эту мысль думаю. Может, кто-то что-то подскажет?
