Question

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

Android 4.4.2上的社交媒体图标看起来整洁而脆弱。

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

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

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

我现在正在使用其他图片做的是使用媒体查询：

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

您可以注意到我实际上正在加载64x64px图像并将其尺寸设置为32x32px。这是一个好习惯吗？

谢谢

更新

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

image 1 - 这些是FontAwesome图标和border-radius

image 2 - 这些是PNG图片

PNG图标有点小，图标并不完全相同，但你可以看到它们之间存在巨大差异。

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

带有border-radius的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; }

Answer 1

您可以使用名为“Stacked Icons”的Font Awesome方法： 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>

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

1 个答案: