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; } } |