javascript - 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" />

但是没有结果..

这是一个显示问题的 fiddle :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

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

尝试将显示分辨率加倍的 PNG 保存为清晰的视网膜外观(即，如果页面上为 18x18，请将其保存为 36x36)。