检查视网膜是否仅使用一张图像答案

【问题标题】：Check if retina or not using only one image检查视网膜是否仅使用一张图像
【发布时间】：2014-10-21 12:17:54
【问题描述】：

正如标题所说。是否可以只使用一张已经适合视网膜的图片，但是当不使用视网膜屏幕时，图片会自动调整大小/裁剪为非视网膜图片？我在使用 IE 时遇到了这个问题（而且我使用的是 PC）。我所有的图片在 Chrome、Opera、Moz 等其他浏览器中看起来都很棒。但是当我在 IE 中查看同一张图片时，它有这些“丑陋的边缘”。

我看到了这个blogpost，但他正在使用两张图片/图像。如果可能的话，我当然不希望那样。

var retina = window.devicePixelRatio > 1;

if (retina) {
    var html = '<img src="my-high-res-image.jpg">';
}
else {
    var html = '<img src="my-low-res-image.jpg">';
}

更具体地说：如果我的图像是 500x500 并且在我的 CSS 中，由于视网膜屏幕，我将其缩小到 100x100 像素。但是，如果屏幕不是视网膜并且我使用的是我缩小的 500x500 图片，它就会有这些“脆边”。

为了向您展示我的意思，我使用 Chrome 和 IE(Edge) 为我正在使用的同一张图片拍摄了两张屏幕截图。以下图片的原始尺寸为 500x500，但已缩小为 100x100。

铬

浏览器

如果我不够清楚，那么回到我的问题：我可以使用一张图像，但在需要时告诉它是否是视网膜？

【问题讨论】：

我认为您可能对“视网膜”的含义感到困惑。据我所知，这不是每个浏览器都会发生的事情。
查找响应式设计。有一些库可以根据屏幕尺寸/像素密度加载不同版本的图像。
我当然明白。但我的问题是我现在没有使用视网膜屏幕。在我朋友的 Mac 上，所有图片看起来都很好，即使在 IE 中，当他使用带有 IE 的 virtualbox 时也是如此。但在我的屏幕上，图片在 IE 中看起来像垃圾，但在 Chrome、Opera 等中却没有。这是为什么呢？
你用的是什么版本的IE？
目前，IE(Edge)。但该网站在 IE9+ 上运行良好

标签： javascript html image retina

【解决方案1】：

这是 IE 在浏览器中处理图像重采样的方式。您应该可以通过在 CSS 中使用它来解决此问题：

-ms-interpolation-mode: bicubic;

默认使用：-ms-interpolation-mode: nearest-neighbor;

根据您使用的 IE 版本，交换重采样方法可能会解决您的问题。

以下是 CSS 技巧的内容：

http://css-tricks.com/ie-fix-bicubic-scaling-for-images/

【讨论】：

是的，我已经在使用双三次了……不知为何，我不知道为什么，它看起来仍然很奇怪。