移动设备和Retina显示屏的高分辨率图片CSS

Question

我的网站图片在视网膜屏幕上的用户看起来很模糊。（例如，在Retina MacBook Pro上）。

我如何为具有视网膜显示屏的访问者提供高分辨率图像，但为其他人提供标准大小的图像，同时保持图像的相同外观大小？

- Chris Nolet

---

一个JavaScript解决方案：retinajs。 - doptrois

Answer 1

在您的 HTML 中，创建一个如下所示的 <div>：

<div class="ninjas-image"></div>

并在你的CSS中添加：

.ninjas-image {
  background-image: url('ninja-devices.png');
  width: 410px;
  height: 450px;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  .ninjas-image {
    background-image: url('[e-mail]');
    background-size: 410px 450px;
  }
}

这里的魔法在于CSS的@media查询。当设备报告一个1.5（144 dpi）或更高的“设备像素比”时，我们会使用双倍大小的图像（[e-mail]）进行替换。以这种方式做可以通过向非Retina设备提供原始、较小的图像来节省带宽，并且在Retina设备上看起来很棒。

注意： 这个答案已经在2016年更新，以反映最佳实践。min-device-pixel-ratio没有进入标准。相反，min-resolution被添加到标准中，但桌面和移动版Safari在撰写本文时不支持它（因此是-webkit-min-device-pixel-ratio回退）。您可以在http://caniuse.com/#feat=css-media-resolution上查看最新信息。

- Chris Nolet

---

你可能希望解释一下这段代码的工作原理：媒体查询和background-size声明的目的是什么，等等。 （顺便说一句，你不再需要使用-webkit-background-size了...） - BoltClock

@BoltClock 已经增加了一些解释并按建议删除了-webkit-background-size。谢谢! - Chris Nolet

这只是 Webkit 特定的，还是有其他供应商前缀？我怀疑也有 -moz。 - mastazi

@mastazi 已经添加了其他供应商的前缀。谢谢！ - Chris Nolet

Answer 2

我们一直使用以下代码来处理比率为1.5或更高的多种情况-这考虑了更多设备和浏览器：

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {

我们已经使整个网站支持Retina显示：http://www.embraceware.com/。

- Jerry Brace

---

@ChrisNolet，如果你想回到原始版本，你应该执行回滚操作而不是尝试重新编辑。 - psubsee2003

抱歉@psubsee2003 - 不知道该怎么做！我在这个页面上没有看到任何回滚链接：http://stackoverflow.com/posts/11063689/revisions。你能帮忙吗？谢谢。 - Chris Nolet

@ChrisNolet 我错了...我忘记你在获得2K声望之前没有回滚的能力。我会帮你回滚的。 - psubsee2003