8

我有一个显示图像的 webview，如下面的代码所示。该捆绑包还有一个 DGT64@2x.png，尺寸为 128x128，可在 iPhone4 上使用。DGT64@2x.png 从不显示。有没有办法显示/或取决于它是 iPhone 还是 iPhone4？

<img src="DGT64.png" width="64" height="64" align="left" style="padding:2px;"/>
4

3 回答 3

14

方法是使用 CSS 背景。只需将所有 2x 的东西嵌入 CSS 的一个小节中。关键还在于设置-webkit-background-size。下面是一个 id 为 & 符号的 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;
  }
}
于 2010-09-09T10:45:23.437 回答
5

我不认为这个@2x技巧适用于网络内容。不过听起来真的很有用，我肯定会向 Apple 提交一个错误来请求它。

如果您从您的应用程序生成上述 HTML，那么我认为目前最好的方法是检测您是否在 Retina 显示设备上运行，然后手动调整图像名称。

您可以通过执行以下操作来检测 Retina 显示屏：

if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)]) {
    if ([[UIScreen mainScreen] scale] == 2) {
        // Use high resolution images
    }
}

（从我在 SO 中找到的答案中获取该代码）

于 2010-09-06T17:15:13.060 回答
2

目前最好的方法是使用background-image属性在 CSS 文件中引用图像。然后，您可以使用仅由具有高分辨率屏幕的设备加载的特殊 CSS 文件来覆盖这些属性。

有关更多信息，请参阅此博客文章。

于 2010-09-06T18:20:40.797 回答