Как обслуживать изображения на мобильных устройствах

Question

Я разрабатываю веб-страницу для мобильных устройств, как смартфонов, так и планшетов.

Я работаю с jQueryMobile, поэтому большинство функций отлично работают на всех устройствах.

Моя проблема заключается в том, что я хочу использовать изображения с очень высоким разрешением, чтобы получить лучшее качество с использованием планшетов. Если я использую 720X1280 - страница выглядит великолепно на планшете, но на смартфонах не происходит нисходящее масштабирование.

Должен ли я строить с использованием 320x480 - и тогда масштабирование произойдет на планшетах? Есть ли какая-либо душа или руководящие принципы?

Answer 1

Используйте отзывчивые изображения. Таким образом, изображение будет масштабироваться в соответствии с размером устройства.

img { 
    width: 100%; 
    max-width: 100%; 
} 

Выше кода css автоматически примет размер родительского контейнера.

Вот несколько отличных примеров & суставов.

http://filamentgroup.com/examples/responsive-images/

http://mobile.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/

Javascript плагинов для адаптивных изображений:

http://adaptive-images.com/

Большой учебник для гибких изображений:

http://www.flexiblewebbook.com/downloads/FlexibleWebDesign_sample_ch9.pdf