0

我一直在考虑在一个网站上使用媒体查询，但只考虑下载一个大文件的想法，因为它需要很长时间才能通过 3G 在 iphone 上下载。

当在 iphone / netbook / 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");
}
4

2 回答 2

3

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

$(document).ready(function() {

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

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

  }

});

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

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

简单的。

于 2010-08-06T20:22:54.560 回答
0

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

$(document).ready(function() {

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

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

  }

});

这应该够了吧。

于 2010-08-06T22:47:38.950 回答