cómo especificar una imagen diferente en css dependiendo de si el usuario visita en un escritorio o un navegador móvil

Question

Sólo una pregunta acerca de CSS para dispositivos móviles,

tengo una imagen que es 1260px de ancho en mi sitio web y cuando Mírelo en el teléfono destoga el sitio web ya que el resto del sitio web se basa en un diseño de 960 px.

He hecho que estas imágenes sean ahora de 960px de ancho para el dispositivo móvil, pero ¿cómo especifico en CSS que si se trata de un dispositivo móvil usará una imagen optimizada para dispositivos móviles en lugar de la del sitio web normal?

Así que, básicamente, si un usuario va a la página web en un ordenador de escritorio se mostrará la imagen de 1260px

y si se visita la página web en un móvil, se mostrará la imagen

ningún chicos Ideas 960?

Answer 1

No estoy seguro de si quieres JS, me decidí a responder a su pregunta si desea CSS3, intente esto:

HTML:

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

CSS:

versión 210

@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(); 
}); 

}); 

Answer 2

Está buscando consultas sobre medios. Puede escribir estilos condicionales de la anchura:

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

http://www.w3.org/TR/css3-mediaqueries/

Answer 3

Inspirado por la respuesta de Iván, que aquí hay una versión de jQuery que utiliza preguntas de los medios para estar lo más cerca posible a su solución de CSS3 (que no funciona para mí en Firefox 31 y 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(); 
    }); 
});