Android 4.0.3 上的边框半径丑陋渲染答案

【问题标题】：border radius ugly rendering on Android 4.0.3Android 4.0.3 上的边框半径丑陋渲染
【发布时间】：2014-05-22 17:49:47
【问题描述】：

我正在使用 Cordova/PhoneGap 开发一个简单的应用程序，并使用 FontAwesome（和边框半径）来显示一些社交媒体图标。我在 CLI 上通过 cordova android build 进行了构建。

社交媒体图标在 Android 4.4.2 上看起来干净利落。

但在 Android 4.0.3 平板电脑以及我同事的 Android 2.3.6 智能手机上，它看起来很糟糕，就像在this screenshot（来自平板电脑）中一样。

边框半径渲染得非常糟糕，但 FontAwesome 图标看起来也很糟糕。

为什么？我应该避免在旧 Android 设备的 Cordova/PhoneGap 应用程序中使用 FontAwesome 和/或边框半径吗？我怎样才能在这些设备上提供更好的图像？

我现在对其他图像所做的是使用媒体查询：

@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5){
    #logo-home { width: 32px; height: 32px; background: url('../img/logo-home64x64.png'); background-size: 32px 32px; }
}

您会注意到我实际上正在加载一个 64x64 像素的图像并将其尺寸设置为 32x32 像素。这是一个好习惯吗？

谢谢

更新

以下是我的 Android 4.0.3 设备 (Galaxy Tab GT-P3100) 上的两个 PNG 屏幕截图（上面链接中的一个是可能有点压缩的 JPEG）的比较：

image 1 - 这些是 FontAwesome 图标和边框半径

image 2 - 这些是 PNG 图像

PNG 图标有点小，图标也不完全相同，但您可以看到它们之间的巨大差异。

为什么边界半径渲染质量这么差？关于图标，实际上只有 YouTube FontAwesome 图标看起来很难看。

带有边框半径的 FontAwesome 图标的 CSS：

.social                     { margin: 0 auto; }
.social .item               { margin: 3px; text-align: center; font-size: 24px; cursor: pointer; display: inline-block; width: 44px; height: 44px; background-color: #68a225; color: #fff; border: solid 1px #fff; border-radius: 22px; }
.social .item:hover         { background-color: #fff; color: #68a225; border: solid 1px #68a225; margin-top: 0;} 
.social .item i             { margin-top: 12px; }

【问题讨论】：

一，那张截图被压缩得很厉害，所以我真的不知道什么是 JPG 工件，什么是来自设备的。第二，虽然可以像您一样使用缩放（坦率地说，我的大多数应用程序都这样做，但我更担心 iOS 而不是 Android），最好使用针对设备像素比率的图标.例如，如果您的设备的像素比 >1 且 border-radius，我不希望 that 受到影响——只是图像。
感谢您的反馈，我链接了两个屏幕截图进行比较，现在使用 png。我理解你关于像素比率的观点，但 Android 设备在像素比率方面差异很大，所以我想我最好使用 svg 或字体图标，对吧？
是...不...对 SVG 的支持差异很大，仅仅因为您有一个矢量并不能保证它在特定大小下是完美的像素。例如，Font Awesome 被构建为在特定尺寸下完美像素（我忘记了），并且在其他尺寸下看起来不错，但不那么清晰。可悲的是，如果您想要最终的清晰度，除了重建和提示每种尺寸的图标外，没有其他好方法。至于那些边框半径——嗯，对于 Android 2.x，这是当然的——除了使用 png 之外，没有其他解决方法。不过，我很惊讶 Android 4.0.3 出现问题。
你使用什么代码，特别是字体真棒图标？
我明白你的意思——无论是作为矢量还是光栅，屏幕上的图像最终都会以像素显示，因此对于每个可能的像素密度变化，每个图像都有一个最佳尺寸。这可能就是 FontAwesome YouTube 图标的情况。不过，边界半径问题对我来说仍然是个谜。

标签： android image cordova font-awesome css

【解决方案1】：

您可以使用 Font Awesome 的“Stacked Icons”方法： http://fortawesome.github.io/Font-Awesome/examples/ - 向下滚动到堆叠图标

这是一个小提琴： http://jsfiddle.net/0n4ou4y3/

<style type="text/css">
    .fa-stack .fa-circle {
    color: #68a225;
    }
</style>

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-youtube fa-stack-1x fa-inverse"></i>
</span>

【讨论】：