javascript - 如果用户在视网膜设备上，则将背景图像替换为更高质量的图像

Question

我正在尝试制作我的第一个视网膜就绪网站，但是当我需要在 css 中将图像替换为更高分辨率时遇到了问题。例如，我不确定如何将标准图像作为背景，然后如果用户在视网膜机器上具有相同的图像但分辨率更高（目前我有低分辨率和高分辨率图像）。谁能建议好的来源或解释如何做到这一点？最好是一个 css 和跨浏览器的解决方案，但它也可以是 javascript 或其他东西。

Answer 1

您可以使用 css 媒体查询

   device-pixel-ratio,
   min--moz-device-pixel-ratio,
   -o-min-device-pixel-ratio,
   -Webkit-min-device-pixel-ratio {
     …
   }

Answer 2

对我来说似乎最简单的解决方案是利用 css。您有一个基类，可以像您所说的那样为背景设置图片，但是您有另一个类可以将背景图像覆盖到更高的分辨率。

使用它作为源，您可以执行此操作来检测它是否是视网膜显示器并向元素添加一个类。

http://briancray.com/posts/detect-retina-displays-with-javascript

var retina = window.devicePixelRatio > 1;
if (retina) {
    // the user has a retina display
    //add code to add the class to your element.
}

Answer 3

检查服务器端的设备也可能是一种解决方案。WURFL 和 Tera-WURFL 等项目让您在做出响应之前了解设备，因此您可以发送正确的 css 文件。