Автоматическое изменение размера изображения для галереи iPhone / iPad в портретном и альбомном режимах

Question

Я должен оптимизировать небольшой сайт для iPhone и iPad. Благодаря медийным запросам я использую два файла CSS, один для портретного и альбомного режима iPhone, а второй для портретного и альбомного iPad + все остальные. На сайте есть картинная галерея, и я хотел, чтобы изображения использовали максимально доступную область в зависимости от того, на каком устройстве они отображаются, плюс режим ориентации.

Я закончил тем, что использовал 4 ползунка nivo на той же странице, где я прячу 3 из 4, используя css (дисплей: нет). Размеры изображений изменяются с помощью TimThumb. Это определенно плохое решение (например, все 4 слайдера nivo загружаются и работают на iPhone, даже если отображается только один), и мне было интересно, есть ли какое-либо другое решение этой проблемы?

Answer 1

У меня была похожая проблема для приложения ipad, и я просто использовал это:

img.homepg {width: 920px;} @media screen и (max-width: 910px) {

img.homepg { 
    width:670px;  } } img { 
transition:all .2s linear; 
-o-transition:all .2s linear; 
-moz-transition:all .2s linear; 
-webkit-transition:all .2s linear; }

, где .homepg - класс img, 920 - наибольшая ширина изображения, 910 - максимальная ширина экрана, при которой изображение запускается.изменить размер (иначе, когда ориентация изменилась), и 670 - это минимальная ширина img!