媒體查詢圖像文件名稱在屏幕上的大小更改

我一直在尋找在網站上使用媒體查詢，但螺栓下載一個巨大的文件只爲它的想法需要年齡在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

媒體查詢圖像文件名稱在屏幕上的大小更改

回答

相關問題