Cordova - JQuery Mobile Icons niedrige Auflösung

Question

Ich entwickle eine Anwendung in Cordova, aber wenn ich es auf Android oder Browser ausführen, sind die Symbole wirklich niedrig res. Ich fand im Internet, die ich hatte dies in dem Meta-Tag hinzuzufügen:

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

Aber ohne Erfolg ..

hier eine Geige ist das das Problem zeigt: LINK

Dies ist, wie ich mache die Symbole im Code:

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

und der CSS:

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

Answer 1

Nichts mit Meta-Tags zu tun. Sie verwenden CSS, um ein 427x325 PNG auf 18x18 zu skalieren - nicht nur, um es auf einen Bruchteil seiner ursprünglichen Größe zu verkleinern, sondern es dabei zu dehnen.

Versuchen Sie, ein PNG mit doppelter Bildschirmauflösung für ein klares Retina-Aussehen zu speichern (d. H., Wenn es auf der Seite 18x18 ist, speichern Sie es als 36x36).