媒体查询图像文件名称在屏幕上的大小更改

我一直在寻找在网站上使用媒体查询，但螺栓下载一个巨大的文件只为它的想法需要年龄在iPhone上通过3G下载。媒体查询图像文件名称在屏幕上的大小更改

当在iphone/netbook/ipad上查看网站时，是否有可能使用jquery更改文件名（即添加-iphone到background.jpg以制作background-iphone.jpg）。

在我的脑海中，似乎应该有可能。这将会是巨大的，如果有任何人可以事先做出来太:-D

感谢

STU

我发现这个代码，发现屏幕尺寸

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

来源

2010-08-04 stuart robson

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

$(document).ready(function() { 

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

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

    } 

});

这样一来，当浏览器检测到等于或大于960×640（iPhone 4的分辨率）较低的分辨率，它会自动添加一个类“iphone”来您指定的任何元素。这可能是身体标记，自定义ID等等。

所有你需要做的是为类“iphone”指定一个不同的背景图像。

简单。

来源

2010-08-06 20:22:54 craftedpixelz

还是一个解决方案，让您使用图片代码，见下图：

$(document).ready(function() { 

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

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

    } 

});

这应该做的伎俩。

来源

2010-08-06 22:47:38 craftedpixelz

媒体查询图像文件名称在屏幕上的大小更改

回答

相关问题