Note: This article has been updated – Detecting and Delivering Images to Retina Displays
After googling for a long time on how to deliver content to the new device, the best I found was Aral Balkan’s excellent article on the higher DPI and how to use it to deliver higher DPI content (http://aralbalkan.com/3331).
However he talks about using css media queries as outlined by Apple in it’s webkit recommendations:
<link rel="stylesheet" type="text/css" href="/css/retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
I think Thomas Mair describes the new display in a nice way, when describing why we need custom CSS:
The reason is, that because every pixel is half the visual size, you may have to double the values of many CSS properties. For example text-shadow: 0 1px 0 #fff; which is like a half visual pixel on the iPhone 4. So to make a one-pixel line (better: looks like a one-pixel line) you have to write 2px. This preserves the visual size and adds a very smooth appearance – like we expect it from a Retina display. It also makes huge improvements for layouts on the iPhone 4 possible.
In short the only way I’ve found of getting the actual screen dimensions of the new device is by using the pretty well hidden “window.devicePixelRatio” property so :
Obviously if you were doing a serious app, you would detect also detect check if the property window.devicePixelRatio exists before doing any computation on it.
But what about PHP, or server side technologies. Well this is were Apple make there second slightly odd choice. When detecting any mobile device from a server most people will use the UserAgent string, to detect the device, and then deliver content. However the iPhone’s user agent is based on the OS and not the device, this may sound like it makes sense, but it bucks a trend made by most other companies who put the model as well as the OS into their device agents. The iPhone 4′s user-agent on iOS4 is exactly the same as the iPhone3GS running the same OS.
iPhone4 & 3GS –
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7