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

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”类指定不同的背景图像。

简单。