我知道这与像素比率和/或图像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来替换高分辨率的“常规”图像.这听起来很疯狂！
有没有更好的方法来解决这个问题？我意识到哪些是“最好的”方式可能会有所不同.如果可以解释每种方法的优点/缺点,那就太棒了！我的目标是使用任何方法呈现最快(希望不使用一些hacky Javascript等).
谢谢！
