替换视网膜就绪设备的背景图像

Question

我有一张在windows operating system 中看起来不错的背景图像，但在retina ready devices 中看起来是多云和拉伸。现在我想在视网膜就绪设备中用高分辨率图像替换背景。 实现它的最佳方法是什么？是media queries 还是使用javascript 或其他什么？

Answer 1

您通常可以target high DPI (Dots Per Inch) displays 使用这样的媒体查询：

@media only screen and (min-device-pixel-ratio: 2) {
    /* high-DPI stuff here */
}

请注意，这将针对满足比率要求的任何内容。

如果您想专门针对 Retina 显示器，您需要添加一些内容以使媒体查询更加具体。以下是 Chris Coyier 的做法：

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

所有这些不同的定位方法都有different levels of support，所以了解一些很有用。

可能已经有多个设备满足这些条件，因此您可以通过使用额外条件使其更加具体，以另一种方式定位它。

例如，要针对 Retina iPhone 5/5S/5C，您可以这样使用：

@media (-webkit-min-device-pixel-ratio: 2) and (width:640px) and (orientation:portrait) { 
    /* Retina-specific stuff here */
}

@media (-webkit-min-device-pixel-ratio: 2) and (width:1136px) and (orientation:landscape) { 
    /* Retina-specific stuff here */
}

但与往常一样，不建议针对特定设备，这是一个永无止境的工作负载。