CODEWITHSUNDEEP
jqueryiphonejquery-mobile
Nick
Nick

Reputation: 382

jQuery mobile - Image sizes with and without retina display

Current developing an iPhone app using jQuery mobile, everything is looking great however when using the retina display all images lose their crispness.

What's the best way to achieve crispness of images in both the retina display and normal display? I can't find anything about this in the jQuery mobile documentation.

Upvotes: 1

Views: 1550

Answers (1)

Niko
Niko

Reputation: 6269

Retina has double the pixel depth. So you need to create new images for it. I suggest using two image folders: i.e. images/ and imagesX2/ (last for retina).

then you can just use a custom css for the high res:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />

see http://thomasmaier.me/blog/2010/06/23/css-for-iphone-4-retina-display/

Upvotes: 4

Related Questions