Beginnerprogrammer Beginnerprogrammer - 1 year ago 105
CSS Question

Cordova - JQuery Mobile icons low resolution

I am developing an application in cordova but when I run it on android or browser the icons really are low res. I found on the internet that I had to add this in the meta tag:

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

But with no result..

here is an fiddle which shows the problem: LINK

This is how I do the icons in code:

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

and the css:

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

enter image description here

Answer Source

Nothing to do with meta tags. You're using CSS to resize a 427x325 PNG to 18x18 - not only shrinking it to a fraction of its original size, but stretching it in the process.

Try saving a PNG with double its display resolution for a clear retina look (i.e. if it'll be 18x18 on the page, save it as 36x36).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download