当前位置:  开发笔记 > 前端 > 正文

uiwebview中的高分辨率图像

如何解决《uiwebview中的高分辨率图像》经验,为你挑选了2个好方法。

我有一个显示图像的webview,如下面的代码所示.该套装还有一个DGT64@2x.png,尺寸为128x128,可在iPhone4上使用.DGT64@2x.png永远不会显示.有没有办法显示/或取决于它是iPhone还是iPhone4?


monkeydom.. 14

这样做的方法是使用CSS背景.只需将所有2x内容嵌入CSS的子部分中.关键还在于设置-webkit-background-size.下面是一个div的部分(视网膜和非视网膜)的示例,其中id为Ampersand,用作图像.

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;
  }
}


Stefan Arent.. 5

我不认为这个@2x技巧适用于网页内容.虽然听起来很有用,但我肯定会向Apple提出一个错误请求.

如果您正在生成从您的应用程序上面的HTML那么我认为现在最好的办法将是如果你是一个Retina显示屏设备上运行,然后手动调整图像的名称来检测.

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

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

(从我在SO中找到的答案中获取该代码)



1> monkeydom..:

这样做的方法是使用CSS背景.只需将所有2x内容嵌入CSS的子部分中.关键还在于设置-webkit-background-size.下面是一个div的部分(视网膜和非视网膜)的示例,其中id为Ampersand,用作图像.

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;
  }
}



2> Stefan Arent..:

我不认为这个@2x技巧适用于网页内容.虽然听起来很有用,但我肯定会向Apple提出一个错误请求.

如果您正在生成从您的应用程序上面的HTML那么我认为现在最好的办法将是如果你是一个Retina显示屏设备上运行,然后手动调整图像的名称来检测.

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

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

(从我在SO中找到的答案中获取该代码)

推荐阅读
殉情放开那只小兔子
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有