enhancing image quality for iphone 4 from 72ppi to 326ppi

I have been trying to understand how to enhance the button quality of my mobile design. My navigation buttons are currently a png sprite that is 72ppi then I have a copy of these buttons in 326 ppi. I have read that iphone4 can automatically pick up the 326ppi image by adding @x2 to the current navigation sprite? At the moment I'm just a little confused开发者_StackOverflow社区 about the process and how my current navigation sprite of 194x343px @ 72ppi can change into an image 335x1469px @ 326ppi?

If anyone can provide some useful info and guidance that would be great.

Kyle

Based on what I could gather, you can create an override stylesheet targeted towards iPhone 4 using this technique. What you need is a @media query, and you're good to go.

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone 4 styles */
}

Or, if you would want to link to an external stylesheet, use:

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

If your button's dimensions are 194x343px on a normal display then include a file called button.png of this size in your project and link to it in Interface Builder - then you also want an image with the dimensions 388x686px (double the size) and with a filename of button@2x.png in your project. Your app will automatically use this higher resolution image when running on a retina display.