Использование jQuery для изменения изображения для мобильных устройств

Question

Я использую скрипт, который создает социальную стену или стену всех моих социальных каналов. Этот скрипт имеет возможность фильтровать социальные сети и имеет значки сверху. Он отлично работает, но на мобильных устройствах значки очень маленькие. Я рассмотрел использование запросов CSS Media, чтобы сделать их больше, но это исказит значки, поэтому я должен заменить значки большими.

Проблема заключается в том, что скрипт генерирует код динамически, и я не могу редактировать этот код. Сгенерированный код выглядит следующим образом:

<li class="active f-facebook"> 
    <a data-filter=".dcsns-facebook" data-group="dc-filter" rel="facebook" href="#filter"> 
    <img alt="" src="/images/icons/facebook.png"> 
    </a> 
</li> 

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

Я не знаю, что попробовать использовать jQuery для этого. Может ли кто-нибудь указать мне в правильном направлении или помочь мне с решением?

Answer 1

Я бы сказал вам использовать CSS вместо сценария, поскольку некоторые операторы используют для отключения javascript в своих мобильных устройствах, и ни одно устройство не имеет такого же поведения со сценарием. Если вы используете CSS, вам нужно добавить класс в свой логотип и установить пропорции с и/или высотой пропорционально. Если вы установили например: 40%, вы можете установить высоту: «auto».

Надеюсь, это поможет!

Answer 2

Возможно использование медиа-запроса? Они позволяют указывать css в отношении определенных атрибутов устройства.

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/