Power By 专否社区

Retina icons with jQTouch

Go To StackoverFlow.com

0

Anyone knows how I can replace the orignial icon with the retina version of it, if the user have a iOS with retina display?

I've tried with data-mask="[name]@2x.[ext]" but without luck. Hope someone have a solution

2012-04-04 07:45
by Simon Thomsen

0

You have to include two files in your project: image.png and image@2x.png. But it's not necessary to write @2x-suffix in code. Just:

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.png"]];

iOS will automatically detect, what image should be used.

2012-04-04 07:50
by demon9733
Problem is, that I'm coding with jQTouch and Phonegap :- - Simon Thomsen 2012-04-04 07:52
Oh, sorry. Well, try to do smth like this: http://flowz.com/2010/07/css-image-replacement-for-iphone-4-high-dpi-retina-display - demon9733 2012-04-04 07:57
Looks like it's working, but the icon on retina displays seems to be to big, even if I just set the size to x2 of the original image. It should just scale it up in quality, but that's not the case here.

As you can see here: http://d.pr/P7an Any suggest - Simon Thomsen 2012-04-04 08:22


0

I'm using the following approach:

  1. Assuming I want to display a 100x40 px height image
  2. Create a single image, 200x80 px
  3. Specify a css width of 100 px and height of 40 px for the image

On non retina displays this will stretch the original image to 50%. For my personal taste the result looks more than OK.

On retina displays this will practically result in a 1-to-1 mapping between image pixels and device (real) pixels.

I have to mention that I didn't test this with Phonegap, but used it in a MonoTouch project, with a web container.

2012-07-13 13:24
by Sorin Comanescu
Ads