用于图像的 Retina Display [重复]

Question

可能重复：
Showing retina display image with pure css

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

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

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

如果这是一个基本问题，欢迎提出任何建议并道歉

Answer 1

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

您是创建静态资产还是使用某些工具/处理程序来动态创建它们是另一个问题。例如，Adaptive Images 是基于 PHP 的解决方案，采用后一种方法。

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

Answer 2

您是否尝试过在网络上搜索一些解决方案？你有没有尝试过？

例如你试过Retina.js吗？

所谓的“视网膜”显示器的问题在于设备浏览器对您的分辨率撒谎，并缩放您网站上的每个图像和每个其他维度。如果这些只是高分辨率显示器而不撒谎，那么就不会有这样的问题，standard responsive design techniques 和 responsive IMGs tricks 就可以工作。

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

1. 宽度（屏幕的宽度是多少）
2. 设备宽度（什么是真正屏幕的宽度）
3. 设备宽度乘以“视网膜”缩放因子（真的 真的屏幕宽度）