jQuery Mobile Hi-Res Images

I’ve been developing a little mobile app using jQuery Mobile and PhoneGap and ran into a little difficulty with supporting both Retina and earlier iPhone displays. Turns out it’s not too difficult using some CSS3 media queries.

However my hi-res images were showing up way too big still.

Simply adding the background-size attribute to what a “standard size” image should be did the job. It did make a lot of sense too, even though I hadn’t thought of it at first.

For instance, my 640px x 1136px image needed a background-size attribute of 320px x 480px to display properly on the Retina display since they pack a much higher pixel density.

1
2
3
4
5
6

@media only screen and (-webkit-min-device-pixel-ratio:2) {
    .ui-body-a, .ui-overlay-a {
        background: url('img/home_bg_2x.jpg') center bottom no-repeat;
        background-size: 320px 480px;
    }
}