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

Question

Как отрегулировать одно и то же изображение в портретном и альбомном режимах iphone и в режиме портрета в альбомной ориентации?

У меня есть сайт шириной 320 пикселей, а изображение заголовка также 320 пикселей, поэтому, когда я вижу этот сайт в ландшафтном режиме, он выглядит немного меньше, а в ipad он еще меньше, так как я могу исправить его такой же ширины устройства. Я использовал медиа-запросы для этого и фиксированную ширину изображения на основе ширины устройства для ex: для ipad я написал размер изображения как 780px, для мобильного ландшафта 380px .. Я правильно это делаю или есть лучший способ ?

Answer 1

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

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

Вы также можете пройти через this link

Answer 2

обнаружить устройство с базой или PHP (strstr внутри агента пользователя) и набора и устройства конкретной таблицы стилей для вашего сайта. Это решение полезно загружать только используемые файлы css.

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

Вот список для некоторых примеров:

http://designmodo.com/responsive-design-examples/