我有一个显示图像的webview,如下面的代码所示。该包还有一个尺寸为128x128的DGT64@2x.png,适用于iPhone4。DGT64@2x.png从未显示过。是否有一种方法可以根据是iPhone还是iPhone4来显示其中之一?
<img src="DGT64.png" width="64" height="64" align="left" style="padding:2px;"/>
使用CSS背景来实现。将所有2x的内容嵌入到CSS子部分中。关键是要设置-webkit-background-size。以下是一个示例,其中包含具有作为图像的ID Ampersand的div的CSS(高清和非高清)部分。
div#Ampersand {
background: url('AmpersandBurned.png');
width:43px;
height:97px;
float:left;
-webkit-background-size: 43px 97px;
}
@media screen and (-webkit-device-pixel-ratio: 2) {
div#Ampersand {
background: url('AmpersandBurned@2x.png');
width:43px;
height:97px;
float:left;
}
}
我认为在Web内容中,@2x
技巧不起作用。虽然听起来非常有用,但我肯定会向苹果提出错误报告请求解决这个问题。
如果您的应用程序生成上述HTML,则目前最好的方法是检测是否在Retina显示设备上运行,然后手动调整图像名称。
您可以通过执行以下操作来检测Retina显示屏:
if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)]) {
if ([[UIScreen mainScreen] scale] == 2) {
// Use high resolution images
}
}
目前最好的方法是使用background-image
属性在CSS文件中引用您的图像。然后,您可以使用一种特殊的CSS文件来覆盖这些属性,该文件仅由高分辨率屏幕的设备加载。
有关更多信息,请参见此博客文章。