将iphone 4的图像质量从72ppi提高到326ppi

时间:2011-06-24 15:53:07

标签: iphone html css

我一直在努力了解如何提高移动设计的按钮质量。我的导航按钮目前是一个72ppi的png精灵,然后我有326 ppi的这些按钮的副本。我看过iphone4可以通过将@ x2添加到当前导航精灵来自动获取326ppi图像吗?目前我对这个过程有点困惑,以及我目前的导航精灵194x343px @ 72ppi如何变成图像335x1469px @ 326ppi?

如果有人能够提供一些非常有用的信息和指导。

凯尔

2 个答案:

答案 0 :(得分:2)

根据我可以收集的内容,您可以使用this technique创建针对iPhone 4的覆盖样式表。你需要的是@media查询,你很高兴。

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone 4 styles */
}

或者,如果您想要链接到外部样式表,请使用:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />

答案 1 :(得分:2)

如果您的按钮的尺寸在正常显示器上为194x343px,那么在项目中包含一个名为button.png的文件并在Interface Builder中链接到该文件 - 那么您还需要尺寸为388x686px(尺寸加倍)的图像并在项目中使用文件名button@2x.png。在视网膜显示屏上运行时,您的应用会自动使用此更高分辨率的图像。