Cordova - JQuery Mobile图标低分辨率

Question

我正在开发cordova中的应用程序但是当我在android或浏览器上运行时，图标确实是低分辨率。我在互联网上发现我必须在元标记中添加它：

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, target-densitydpi=device-dpi, user-scalable=0, target-densitydpi=medium-dpi" />

但没有结果......

这是一个显示问题的小提琴：LINK

这就是我在代码中执行图标的方式：

<i class="ui-icon-departure ui-btn-icon-notext inlineIcon"></i>

和css：

.ui-icon-departure:after {
    background-image: url("../img/icons/vertrek-icon.png");
    background-color: transparent;
    background-size: 18px 18px;
}

Answer 1

与meta标签无关。您正在使用CSS将427x325 PNG的大小调整为18x18 - 不仅将其缩小到原始大小的一小部分，而且在此过程中将其缩小。

尝试以显示分辨率的两倍保存PNG，以获得清晰的视网膜外观（即如果它在页面上是18x18，则保存为36x36）。