如果用户在视网膜设备上，则替换背景图像以获得更高质量的图像

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文件。