1

我正在使用媒体查询，但不幸的是，在确定用户代理（如谷歌、Facebook 和其他网站）方面，它们不如专门针对移动设备的简单“整体”版本的网站。我不想做一个特别的版本，因为我已经将整个网站翻译成媒体查询。最重要的是，这种方法在加载页面的重量方面没有灵活性，这对手机所有者来说至关重要（在我们国家，移动互联网仍然非常昂贵+图像降低性能）。我已经成熟了使用 Javascript 的想法，这将阻止浏览器以特定规则（例如屏幕分辨率）加载图像。你怎么想——实际上已经实现了，并且可能已经实施？我知道很多聪明人都访问过这个网站，我真的很想听听您在这方面的宝贵经验！

抱歉英语不好。

更新： 防止图像加载

4

1 回答 1

1

这个问题有许多可能的解决方案。我将在下面列出常见的三个。

如果您不关心旧版浏览器，则可以使用纯 CSS 解决方案、javascript 解决方案和 HTML5 解决方案：

CSS

我建议将图像移动到样式标签中并使用媒体查询来显示适当的图像：

<style>
/* mobile first */
.img {
    display:none;
}

/* tablet */
@media (min-width:600px) {
    .img {
        background:url('/path/to/image-tablet.png') no-repeat scroll 0 0 transparent;
    }
}

/* desktop */
@media (min-width:1280px) {
    .img {
        background:url('/path/to/image-large.png') no-repeat scroll 0 0 transparent;
    }
}
</style>

<div class="img"></div>

假设这是一个动态网页，您将style在带有标签的页面中包含 css，而不是在 css 文件中。

HTML5

如果您不关心完整的浏览器覆盖 ( canIuse )，您还可以使用新的 HTML5picture元素：

<picture>
  <source 
    media="(min-width: 1280px)"
    srcset="/path/to/image-large.png">
  <source 
    media="(min-width: 600px)"
    srcset="/path/to/image-tablet.png">
  <img src="/path/to/image-mobile.png" /> <!-- a 1x1 empty pixel -->
</picture>

在此示例中，移动浏览器和不支持它的浏览器将加载该img标签。其他浏览器将为媒体查询加载适当的图像。

如果你喜欢这个解决方案，但也希望它在旧浏览器上工作，你可以找到一些 JS 脚本，如果浏览器不支持它，它们将实现该功能。

Javascript

这种方法对我来说是最骇人听闻的，但这只是我的看法。它的浏览器覆盖范围非常大，IE 从 10 开始就支持这种方法。

创建一个不带src属性的图像标签，并将图像大小版本作为data属性：

<img data-tablet="/path/to/tablet.png" data-desktop="/path/to/large.png" />

<script>
var $el = jQuery('img');
if(window.matchMedia("(min-width: 600px)").matches) {
    $el.attr('src', $el.data('tablet'));
}
if(window.matchMedia("(min-width: 1280px)").matches) {
    $el.attr('src', $el.data('desktop'));
}
</script>

我使用 jQuery 来演示，但其中重要的部分是window.matchMedia. 这会执行类似检查的媒体查询并返回一个布尔值。

于 2015-09-04T15:28:12.203 回答