0

可能重复：
如何为我的网站设置视网膜图形？

将 2x 图像添加到将在具有 Retina 图形的新 iPad 上显示的网页的最佳方法是什么？

我已经浏览了这些文章。

http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website/

http://www.teamdf.com/web/automatically-serve-retina-artwork/191/

http://retinajs.com/

4

1 回答 1

2

有各种建议的方法可以解决 Retina 显示器（和大显示屏等）的问题。不幸的是，其中大多数只是这些建议。

最流行的两个是添加标签的建议，它接受多个图像并且浏览器将仅加载一个（取决于开发人员指定的媒体查询）：

<picture alt="angry pirate">
   <source src=hires.png media="min-width:800px">
   <source src=midres.png media="min-width:480px">
   <source src=lores.png>
      <!-- fallback for browsers without support -->
      <img src=midres.png alt="angry pirate">
</picture>

另一个建议是在图像上使用“srcset”为图像指定多个来源：

<img alt="Cat Dancing" src="small-1.jpg"
srcset="small-2.jpg 2x,  // this is pretty cool
large-2.jpg 100w,       // meh
large-2.jpg 100w 2x     // meh@2x
">

我个人认为这更丑陋（并且当浏览器决定要加载哪个图像时，它让您的控制更少）但据我了解，第二个解决方案已添加到官方规范中（以某种身份）

除了这些建议之外，当前唯一真正的解决方案是从原始尺寸的 2 倍（或 1.5 倍，具体取决于您的偏好）的图像开始

或许可以尝试并获得所有幻想并做一个 JavaScript 解决方案，但我认为这会使事情变得过于复杂......

下面是一篇非常好的文章，讨论了您描述的问题（我觉得我有点漫无边际！）： http ://www.alistapart.com/articles/mo-pixels-mo-problems/

于 2012-11-07T11:26:07.910 回答