Как указать другое изображение в css в зависимости от того, посещает ли пользователь на рабочем столе или в мобильном браузере

Просто вопрос о css для мобильных устройств,

У меня есть изображение шириной 1260 пикселей на моем сайте, и когда я смотрю на него по телефону, он разрушает веб-сайт, так как остальная часть сайта основана на макете 960 пикселей.

Я сделал эти изображения размером 960 пикселей для мобильного устройства, но как я могу указать в css, что если это мобильное оптимизированное для мобильных устройств изображение вместо обычного на веб-сайте.

Таким образом, в основном, если пользователь выходит на веб-сайт на настольном компьютере, он покажет изображение 1260px

и если они посещают веб-сайт на мобильном устройстве, он отобразит изображение 960px

какие-нибудь идеи ребята?

Ответы

Ответ 1

Я не уверен, что вы хотите JS, я решил ответить на ваш вопрос, если вы хотите CSS3, попробуйте следующее:

HTML:

<img src="image.jpg"
     data-src-960px="image-960px.jpg"
     data-src-1260px="image-1260px.jpg"
     alt="">

CSS

 @media (min-device-width:320px) {
        img[data-src-960px] {
            content: attr(data-src-960px, url);
        }
    }

    @media (min-device-width:960px) {
        img[data-src-1260px] {
            content: attr(data-src-1260px, url);
        }
    }

версия jQuery:

 $(document).ready(function() {

 function imageresize() {
 var contentwidth = $('#content').width();
 if ((contentwidth) < '960'){
 $('.imageclass').attr('src','image-960px.jpg');
 } else {
 $('.imageclass').attr('src','image-1260px.jpg');
 }
 }

 imageresize();//Activates when document first loads    

 $(window).bind("resize", function(){
 imageresize();
 });

 });

Ответ 2

Вдохновленный Иваном ответом, вот версия jQuery, которая использует медиа-запросы как можно ближе к его решению CSS3 (которое не работает для меня в Firefox 31 и Safari 7):

$(document).ready(function() {
    var mqsmall = "(min-device-width:320px)";
    var mqbig   = "(min-device-width:960px)";
    function imageresize() {
        if(window.matchMedia(mqbig).matches) {
            $('img[data-src-1260px]').each(function () {
                $(this).attr('src',$(this).attr('data-src-1260px'));
            });
        }
        else if(window.matchMedia(mqsmall).matches) {
            $('img[data-src-960px]').each(function () {
                $(this).attr('src',$(this).attr('data-src-960px'));
            });
        }
    }

    imageresize();

    $(window).bind("resize", function() {
        imageresize();
    });
});