我有一个利用jQuery Mobile的移动网站，但坦率地说，这些图像看起来像iPhone 4 / 4S上的废话。我认为同样适用于新的iPad＆＃34;什么时候可以在本周晚些时候使用。
我知道这与像素比率和/或图像DPI（或PPI或您想要称之为的任何内容）有关...让我们不讨论这个问题。我只是想知道为这些iOS视网膜显示器提供高分辨率网页图像的最佳方法是什么。
起初，我认为更改图像DPI（在Photoshop中）可以解决问题。我拍了一些样本图像并将它们缩小到190px的宽度。我以72 DPI保存了一张图像，另一张图像保存在200 DPI。这没有效果。亲眼看看（在iPhone 4 / 4S上）：http://haxway.com/restest/1.html每个的底部图像是200 DPI。
然后，我没有将高分辨率图像保存在200 DPI，而是再次将其保存在72 DPI，但这次我增加了宽度（到528px），这样当缩小到190px的宽度时，它将在〜 200 DPI。这似乎可以解决问题：http://haxway.com/restest/2.html如果查看源代码，您可以看到我在图像标记上强制宽度/高度（<img src="w4.jpg" alt="" width="190" height="143">）。
但是，我不相信这是最好的解决方案。没有使用宽度/高度属性来缩放图像影响渲染性能，因为设备必须缩放图像而不是仅加载它（而不是再接触它）？
经过一些研究，看起来有一些CSS媒体查询，如-webkit-min-device-pixel-ratio [1]，您可以使用不同的CSS进行高分辨率显示，从而在CSS中加载更高分辨率的图像。但我需要定位HTML <img>标记。我读过的另一篇文章（遗憾地丢失了链接）建议使用Javascript来换掉＆＃34;常规＆＃34;高分辨率的图像。这听起来很疯狂！
有没有更好的方法来解决这个问题？我意识到意见可能会有所不同，哪些是最好的＆＃34;办法。如果可以解释每种方法的优点/缺点，那就太棒了！我的目标是使用任何方法呈现最快（希望不使用一些hacky Javascript等）。
谢谢！
答案 0 :(得分：1)
您需要运行某种形式的j作为解决方案。目前选择使用的是mat wilcox。它将为屏幕提供正确的图像。此解决方案的一大优点是它可以缓存图像以减少用户的负担。
有一种推动新的图片html元素，可以采取多种来源来克服这个问题，但它还有一段路要走。
答案 1 :(得分：0)
对于图片代码，我认为您已经提供了自己的解决方案。最大的好处是，为所有客户发送同一个图像。
对于css图片，你不能这样做吗？忘记笨重的-webkit-min-device-pixel-ratio每次烹饪新设备时都需要不同的图像。只需发送最大的图像，然后使用CSS3的background-size进行缩小。我没有测试过这个。 IE＆lt; 9会给你一个问题。
我，可能和你一样，惊呆了html / css没有提供一个正确的方法来做到这一点，只有这样的hacky解决方法。就像你一样，我也很困惑为什么浏览器不仅仅坚持图像DPI信息。如果有人知道，评论表示赞赏。
有没有更好的方法来解决这个问题？
是的，避免使用位图图像。使用SVG。