javascript - 用于图像的 Retina 显示屏

Question

可能重复：
使用纯 css 显示视网膜显示图像

我一直在阅读有关视网膜显示媒体查询的内容，以为拥有视网膜显示的人提供更高质量的图像。我的问题是我是否在我的资产中保存了两次相同的图像（一个医学质量和另一个高质量）例如，然后根据设备是否支持视网膜来提供一个或另一个

或者我是否有一张图像，然后使用媒体查询以最高质量在支持视网膜的设备上提供图像。

我的第二个问题是，如果用户拥有启用视网膜的设备，我将如何告诉浏览器以最高质量提供所有图像

如果这是一个基本问题，我们将不胜感激任何建议并道歉

score 2 · Accepted Answer

IMO，您必须根据设备分辨率提供不同的图像 - 主要原因是小型设备可能具有较低的带宽连接和较少的资源（考虑本地缓存）等 - 因此较低分辨率的图像（具有较小的尺寸）将是更好的选择。

无论您是创建静态资产还是使用某些工具/处理程序来动态创建它们是一个不同的问题。例如，自适应图像是基于 PHP 的解决方案，采用后一种方法。

编辑
关于您的第二个问题，如果您正在使用媒体查询，那么浏览器每次都会做出该决定 - IMO，除了说使用媒体查询来应用用于该设备的整个 css 文件之外，不会有任何解决方案。但我认为从性能角度来看不会有任何显着差异。

score 1 · Accepted Answer

您是否尝试过在网上搜索一些解决方案？你试过什么吗？

例如，您尝试过Retina.js吗？

所谓的“视网膜”显示器的问题在于设备浏览器对您的分辨率撒谎，并缩放您网站上的每个图像和每个其他维度。如果这些只是高分辨率的显示器，没有任何谎言，那么就不会有这样的问题，标准的响应式设计技术和响应式 IMG 技巧就可以正常工作。

不幸的是，事实并非如此，现在您的设计必须处理：

2 回答 2