iPhone 上网站的 Retina Graphics 很浪费答案

【问题标题】：Retina Graphics for websites on iPhone is wastefuliPhone 上网站的 Retina Graphics 很浪费
【发布时间】：2012-08-06 14:03:09
【问题描述】：

对背景图片使用 CSS 媒体查询非常棒，但是常规的嵌入图片呢？

www.retinajs.com 和 www.retina-images.complexcompulsions.com 很棒，但我对它们都有一个问题。它们为所有视网膜设备提供视网膜图形，无论大小。例如，iPhone 不需要为其提供视网膜图形，因为它无论如何都会缩小图像。在（可能）连接速度较慢的 iPhone 上提供双分辨率图像是一种浪费。

谁有办法解决这个问题？

【问题讨论】：

好吧，如果您在显示 Retina 图形时遇到麻烦，不妨将您的网站设计为响应式。在这种情况下，iPhone 图形不会缩小。
使用响应式设计，我只能看到使用背景图像作为解决方案。对于 html 中的图像，没有其他解决方案，除非您为所有内容创建两个 div，1 个用于视网膜，1 个用于常规和 display:block 适当的。

标签： iphone css image retina-display

【解决方案1】：

Matt Wilcox 构建了http://adaptive-images.com/ 来解决这个问题。不过它需要一些服务器端代码。

此外，W3C 正在调查 <img srcset="big.png 1100w, medium.png 500w, small.png 200w">，但我不确定它是否已被纳入标准（存在很多分歧），或者 webkit 是否有时间实施它。

【讨论】：

谢谢，研究了那个，但如果可能的话，试着找到更简单的东西。
唉，这就像它做对了一样简单，没有在需要时使用 javascript 加载更高分辨率。
此外，“视网膜”显示器使问题复杂化——它们的分辨率是“普通”显示器的两倍，因此无论如何它们都需要更高分辨率的图形！这不是一个简单的问题...
查看了自适应图像解决方案的更多信息，但它仍然存在与以下链接中所述相同的问题：adaptive-images.com/details.htm#alternate-js

【解决方案2】：

正如@OllyHodgson 建议的那样，自适应图像 是一个很好的解决方案，johannheyne 提供的扩展脚本更能涵盖您的确切问题，控制应该作为视网膜图像提供的内容和方式。希望这会有所帮助！

【讨论】：