html - 如何根据用户是在桌面浏览器还是移动浏览器上访问，在 css 中指定不同的图像

Question

只是关于移动设备的 css 的问题，

我的网站上有一张 1260 像素宽的图片，当我在手机上查看它时，它扭曲了网站，因为网站的其余部分基于 960 像素的布局。

我已经为移动设备将这些图像设置为 960 像素宽，但是我如何在 css 中指定如果它是移动设备则使用移动优化图像而不是常规网站上的图像。

所以基本上，如果用户在桌面计算机上访问该网站，它将显示 1260 像素的图像

如果他们在手机上访问该网站，它将显示 960 像素的图像

有什么想法吗？

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

 });