web-applications - iphone 4 移动版 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");
    }
}

这暂时有效，但我不是最佳解决方案。在另一篇文章的评论中，谈到根本不使用像素作为衡量标准，这是完全有道理的。 iPhone4 只是众多高 dpi 设备中的第一款。因此， future 像素的尺寸会更大。

移动 Safari 从 ios 2.1 开始就支持 SVG，因此根据您必须支持 SVG 的设备(可能有一些后备)是需要强烈考虑的。

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