I can't see jquery mobile icons with retina display

Question

my problem is: If I use my iphone4 with retina display I can't see any icons from the icons-18-white.png (with iPad and iPhone3GS everything is fine).

If I test the png in a browser everything is fine too with the following settings:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dpi) {
.ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
.ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
.ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
.ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-search, .ui-icon-searchfield:after, 
.ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on {
background-image: url(images/icons-36-white.png);
-moz-background-size: 776px 18px;
-o-background-size: 776px 18px;
-webkit-background-size: 776px 18px;
background-size: 776px 18px;
}
.ui-icon-alt {
background-image: url(images/icons-36-black.png);
}
}

/* plus minus */
.ui-icon-plus {
background-position: -0 50%;
}
.ui-icon-minus {
background-position: -36px 50%;
}

/* delete/close */
.ui-icon-delete {
background-position: -72px 50%;
}

/* arrows */
.ui-icon-arrow-r {
background-position: -108px 50%;
}
.ui-icon-arrow-l {
background-position: -144px 50%;
}
.ui-icon-arrow-u {
background-position: -180px 50%;
}
.ui-icon-arrow-d {
background-position: -216px 50%;
}

Need help - thanks in advance!

Answer 1

FYI...the file name doesn't need to be @2x.png, that's just the way that iPhone applications do it. I thought it was a good idea to continue using that format.

Answer 2

If you're referring to jQuery Mobile files that you've pulled down locally (as opposed to using the jQuery Mobile CDN), make sure you have all the image files included in your project. For high-res display, a different sprite image is used (icons-36-white.png instead of icons-18-white.png).

Answer 3

I had same issue using CDN version. I usually tested on PC, but had to debug something else with my IPad on MAC. And there I saw that it pulled the icons-36-white.png and not icons-18-white.png , which was the one I was referring to on PC (in my manifest file for the app).

So always keep a reference to both files when making HTML5-apps with offline reading.

Answer 4

You need to create additional icons with the format [filename]@2x.png. Andy Matthews' page explains very clearly how to do it.