媒体查询图像文件名随屏幕尺寸变化

Question

我一直在考虑在网站上使用媒体查询，但突然想到下载一个大文件，因为通过 3G 在 iPhone 上下载需要很长时间。

当在 iphone / 上网本 / ipad 上查看网站时，是否可以使用 jquery 更改文件名（即，将 -iphone 添加到 background.jpg 来制作 background-iphone.jpg），也许也使用其中的媒体查询。

在我看来这应该是可能的。如果有人也能解决这个问题，那就太好了:-D

提前谢谢你

，

我已经找到了这个用于查找屏幕尺寸的代码

$(document).ready(function() {

if ((screen.width>=1024) && (screen.height>=768)) {
alert('Screen size: 1024x600 or larger');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect1024.css"});
}
else  {
alert('Screen size: less than 1024x768, 800x600 maybe?');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect800.css"});
}
});

，并且我找到了这个脚本，我认为它添加了文本来记录

$('.rollover').hover(
        function(){ // Change the input image's source when we "roll on"
            var t = $(this);
            t.attr('src',t.attr('src').replace(/([^.]*)\.(.*)/, "$1-over.$2"));
        },
        function(){ 
            var t= $(this);
            t.attr('src',t.attr('src').replace('-mobile',''));
        }
 );

我如何可以的任何想法将两者结合起来？？

也许是这样的 -

$(document).ready(function() {

if ((screen.width>=1024) && (screen.height>=768)) {
var t= $(this);
t.atter('src',t.attr('src').replace('-mobile',''))
}
);

但不知道如何修复语法错误

或者也许是这样 - 但仍然有结束语法错误

$(document).ready(function() {

if ((screen.width>=1024) && (screen.height>=768)) {

   var re = new RegExp("(.+)_hover\\.(gif|png|jpg)", "g");
   return filename.replace(re, "$1.$2");
}

Answer 1

这是可能的，而且实现起来也不难。但为了简单起见，为什么不使用类似：

$(document).ready(function() {

  if ((screen.width<=960) && (screen.height<=640)) {

    $("#someid").addClass("iphone");

  }

});

这样，当浏览器检测到等于或低于 960x640（iPhone 4 分辨率）的分辨率时，它会自动向您指定的任何元素添加“iphone”类。这可以是正文标签、自定义 ID 等。

然后您需要做的就是为“iphone”类指定不同的背景图像。

简单的。

Answer 2

或者对于允许您使用图像标签的解决方案，请参见下文：

$(document).ready(function() {

  if ((screen.width<=960) && (screen.height<=640)) {

    $("img").attr("src", $("img").attr("src").replace(/([^.]*)\.(.*)/, "$1-iphone.$2"));

  }

});

这应该可以解决问题。