iphone 4 mobile safari 中的图像模糊

Question

我正在制作一个移动网络应用程序，但我的图片出现了一些问题。它们在我的桌面上看起来很棒，但在 iPhone 上却很模糊。我猜这是视网膜显示的原因，移动 safari 需要将网站的大小增加一倍。

是否有一种解决方法可以让图像在 iPhone 4 上显得清晰？

Answer 1

我找到了答案。我找到了这篇文章： http://seesparkbox.com/foundry/targeting_iphone_4s_retina_display_with_media_queries 哪个提倡使用这样的媒体查询：

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    #map-page .ui-icon {
        background-image: url("/images/retina/4_ikon_hitta.png");
    }
}

这暂时有效，但我不是最佳解决方案。在另一篇文章的 cmets 中，讨论了根本不使用像素作为测量值，这非常有意义。 iPhone4 只是众多高 dpi 设备中的第一款。所以未来像素会更大。

Mobile Safari 自 ios 2.1 起就支持 SVG，因此根据您必须支持 SVG 的设备（可能有一些后备）是需要强烈考虑的。

对于我的（还有你的！）下一个项目，我将深入研究 ems、points、% 和 SVG。