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

Question

我一直在尝试理解如何提高我的手机设计的按钮质量。我的导航按钮目前是一个72ppi的png精灵，然后我有一个326ppi的这些按钮的副本。我读到过iphone4可以通过将@x2添加到当前导航子画面中来自动拾取326ppi图像？目前，我只是对这个过程有点困惑，我现在的导航精灵194x343px @ 72ppi如何才能变成图像335x1469px @ 326ppi？

如果有人能提供一些有用的信息和指导，那就太好了。

凯尔

Answer 1

根据我收集到的信息，您可以使用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" />

Answer 2

如果您的按钮在普通显示器上的尺寸为194x343px，则在项目中包含此尺寸的名为button.png的文件，并在界面生成器中链接到该文件-那么您还需要在项目中包含尺寸为388x686px (大小的两倍)且文件名为button@2x.png的图像。当在视网膜显示屏上运行时，您的应用程序将自动使用此较高分辨率的图像。