Работая над новым дизайном сайта, я искал решение для вопроса адаптивного изображения / адаптивного дизайна.
Я пришел к такому простому «решению», что должно быть какое-то явно очевидное явление, которое скрывается на виду. Прежде чем планировать редизайн корпоративного сайта, основанного на этом решении, я хочу попросить помощи в определении проблем или полной развенчании моей идеи.
Обратите внимание: http://jsfiddle.net/exXgz/1/
Измените ширину вашего браузера, чтобы видеть масштаб изображения с соответствующего большого изображения (1440 пикселей в ширину, 16 КБ) на маленькое (200 пикселей в ширину, 4 КБ) при имитации ширины мобильного устройства.
Техника требует две строки CSS для каждого изображения, требующего динамического масштабирования - в моем случае, только БОЛЬШИХ в галерее. Все изображения начинаются с прозрачного GIF с соответствующим масштабированием (соотношение сторон), с уникальным стилем, назначенным для обозначения «фонового» изображения, которое заполняет прозрачную область.
Затем медиа-запросы CSS определяются на основе ширины браузера, и фоновое изображение загружается / заменяется на лету соответственно. Не требуется серверный код, JS или PHP.
Первая проблема, о которой я могу подумать: страница не будет хорошо работать, если CSS не поддерживается / не загружается. Не слишком волнуюсь по этому вопросу, так как я предполагаю, что это будет очень редко.
При просмотре ресурсов страницы, загружаемых с помощью Safari, появляется только фоновое изображение, удовлетворяющее запросу @media. Это означает, что пользователи iPhone не будут загружать оба изображения и по существу делают эту технику бесполезной.
Что вы думаете? Это был долгий день - я что-то упускаю, что опровергает эту идею ?
Edit: изменен jsFiddle для работы в IE9 / Win7, который является единственной версией Windows, которую я могу проверить прямо сейчас.