How to test a webpage meant for Retina display

For your app to support the new iPad retina display, you need to develop and build against the 5.1 SDK (which I think means you need to use XCode 4.3).

OK, this is a pretty serious misunderstanding (which is cool! :) ), so here's a brief explanation of what you might want to do.

Firstly, any recent iPhone/iPod/iPad or many Android phones have Hi DPI screens, so you might already have something to test with. If not, and you are doing this professionally, just buy a 4G iPod Touch.

In terms of how it works, for 99% of stuff, you need do nothing. If it worked how you suggested, then most websites would be a quarter of the size they should be, and the internet would be broken.

For fonts, SVG, CSS box shadows, gradients and any other CSS drawn stuff, it's all good. Those things look awesome without any extra work. (Hence why we've been pushing towards everything in CSS for a while.)

For bitmaps (i.e. pngs, jpgs, gifs), all you need to do is provide the image with 2x the resolution, but size it the same as normal.

As an example, if your page had an image that was 100px by 100px, you'd provide an image that was 200px by 200px, but specify in CSS or as an attribute in HTML that it is 100px by 100px.

The reason this works is that a pixel on the screen is not the same as a CSS pixel. This is a good thing, because otherwise as I say, things would be tiny.

I guess that in hindsight, it might have been better to call the px unit in CSS something different, like a dot or something, but there you go.

You'll sometimes see references to device independent pixels, which is the difference between the CSS px, and the real pixel on the screen.