Question

我一直在寻找在网站上使用媒体查询，但坚持下载一个巨大文件的想法只需要花费很长时间才能在3G上通过iphone下载。

当在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");
}

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"));

  }

});

这应该可以解决问题。

媒体查询图像文件名称在屏幕大小上发生变化

2 个答案: