Beginnerprogrammer Beginnerprogrammer - 18 days ago 4
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

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).