Desiging Websites for Retina style devices: What dimensions should you use when designing?

Question

The dimensions of the iPhone is 320x480 The dimensions of a Retina iPhone is 640x960

When designing a design for a retina device, do you set the size of your document to 320 x 480 or 640 x 960?

I would have thought you would have set the size to 320 x 480. The reason for this is that although a retina device has more pixels, these are still being displayed on a 3" screen size. If you did set your size to 640 x 960, then when viewed on a retina display, all the text would be small, as although there are more pixels, the screen isn't physically bigger.

Is that correct?

UPDATED: Do you also use 320 x 480 as a base size for CSS (see comments below)

Answer 1

Yes, that's correct. I'm an iOS developer, not a web designer, but in iOS devices you specify everything in points (which is one pixel on a non-retina device, and a 2x2 pixel block on a retina device) so everything is the same size. The extra pixels on the retina display simply make everything look better.

You can get away with smaller text on a retina screen since you have more detail, but accessibility wise that's not a good move, since lots of people can't then see your text without zooming, whatever kind of display they have.