我们目前正在为移动设备构建一个网站。支持的操作系统和浏览器应该是:

• Android 4.x(股票浏览器、谷歌浏览器)
• iOS6+(Safari、谷歌浏览器)

为了也支持高分辨率显示器，我们评估了各种技术和库，以自动用高分辨率附件替换图像:

尝试 1:retina.js http://retinajs.com/

第一次尝试是使用像这样的普通 <img> 标签:<img src="foo.png"> 并使用 retina.js 让它自动将 src 属性替换为视网膜图像的名称 (foo@2x.png)。这可行，但有两个缺点:首先，它会产生不必要的开销，因为原始图像和视网膜图像都会被加载；其次，如果没有可用的视网膜图像，则会在服务器日志中导致大量 404 错误，这我们不想要。

尝试 2:picturefill.js https://github.com/scottjehl/picturefill

这个框架使用了一些基于 <span> 元素的奇怪的 html 标记。对我来说，看起来好像作者试图模仿提议的 <picture> 元素，这不是一个标准(但)，请参阅 http://picture.responsiveimages.org - 我不喜欢这种方法，因为它有奇怪的标记。对我来说，用跨度语义描述图像没有意义。

尝试 3:通过 CSS 属性 background-image 替换图片

我有时看到人们使用 CSS 媒体查询来检测视网膜显示器，然后在 div(或类似元素)上设置背景图像，并使用更高或更低的解决方案图片。我个人也不喜欢这种方法，因为它完全不鼓励创建语义良好的标记 à la <img src="foo.png"> 。我无法想象只用 div 构建一个网站，然后将所有图像设置为背景图像 - 这感觉很奇怪。

尝试 4:通过 CSS 属性 content:url(...) 设置图片

正如此处 Is it possible to set the equivalent of a src attribute of an img tag in CSS? 所提议的那样，似乎可以使用属性 content:url() 通过 CSS 覆盖 img 标签中的 src 属性。现在，计划如下:我们为每个图像设置 img 标签，并在其 src 属性中引用一个透明的空白 1x1 png，如下所示: <img id="img56456" src="transp_1x1.png" alt="img description"> 。现在这在语义上是可以的，并且对 W3C 验证器也有效。然后我们加载一个 CSS 样式表，通过媒体查询设置网站上的所有图像。

例子:

#img56456{content:url(foo.png)}
@media (-webkit-min-device-pixel-ratio: 2){ 
    #img56456{content:url(foo@2x.png)}
}

现在，这种方法非常有效:

• 无开销
• 实体标记
• 适用于所需的设备/浏览器
• 这里不需要图像 SEO

现在，这种方法会导致我们没有想到的任何副作用吗？我只是问，因为我知道它有效，但是通过 CSS 设置所有图像有点“感觉”很奇怪，我还在 SO Is it possible to set the equivalent of a src attribute of an img tag in CSS? 上发现了关于这种方法的评论:

"Worth to add that even in browsers that support assigning content to img, it changes its behavior. The image starts to ignore size attributes, and in Chrome/Safari it loses the context menu options like 'Save image'. This is because assigning a content effectively converts img from empty replaced element to something like <span><img></span>"

这会是个问题吗？ (我没有注意到任何大小问题，上下文菜单不是必需的)

最佳答案

有很多优点和缺点，但一个缺点是图像不会被缓存。这在移动设备上是一个更大的问题，因为移动设备的互联网速度通常较慢且对用户来说更昂贵(如果是数据连接而不是 wifi)。

我不知道那些库，但你可以使用媒体查询，这取决于你有多少图像，否则会编写很多代码变体。并有一个阈值屏幕大小，此时您可以使用不同的文件。实际上只加载了一个文件，即使您在媒体查询中同时指定了这两个文件。

关于javascript - 好主意还是坏主意 : Replacing all images on a mobile website with CSS property "content:url()" for retina displays，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21433643/