新iPad（iPad 3），如何处理图像？ JS脚本自动加载正确的大小？

Question

现在市场上新的ipad是什么，最适合处理网站图片的做法是什么？

是否有任何脚本会根据屏幕分辨率自动选择版本x1或x2？

Answer 1

您可以使用window.devicePixelRatio属性以几种不同的方式执行此操作 - 直接使用不同的媒体查询在CSS中，或在Javascript中。

这篇文章很好地解释了如何做到这一点：

http://mikepultz.com/2012/03/how-to-make-images-look-good-on-the-ipad-3/

Answer 2

我正在使用媒体查询。这是最简单的方法。这是我正在使用的代码：

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
   .your-class-name {
      background: url("images/your-image@2x.png"); 
      background-size: 18px 18px; 
   }
}

记住：

•在扩展程序之前添加“@ 2x”

•使用与非视网膜图像相同的“背景大小”

•Retina图像的大小是非视网膜的两倍

Exp：

非Retina = 100px x 100px

Retina = 200px x 200px

Answer 3

几天前我自己也在研究这个问题 - 你可能会对自适应路线感兴趣。检查一下http://adaptive-images.com/非常简单，可以实现。它向您展示了如何根据显示更改它 - 请注意，这意味着您必须保存更高分辨率的图像，并且这些设备可能没有最佳的互联网连接。