Designing websites for Retina display and HiDPI screens
We're working on making iMore support the new iPad's Retina display (and other HiDPI screens when they ship). Here are some links I've been collecting.
How to preview the Retina display enhanced Apple.com in Safari on Mac or PC
How Apple.com will serve retina images to new iPads Cloud Four
iPad 3 and Retina Screen: What it means for your mobile commerce site | Mobify
CSS3: What is the best method for adding 2x images to webpages that will be displayed on the new iPad with Retina graphics? - Quora
An Example of Photography on the Retina Display - Duncan Davidson
We're not sure about the best method yet -- how to triage which images get supported and how -- but we're working on it.
Anyone else giving it a go?
- 03-28-2012, 07:27 PM #2iPhone Nanite
- 6 Posts
It seems like CSS and background-image based things are *fairly* easy and you can use media queries to only serve one image that's the right size for the device.
I think img tags are far harder to get right. I don't think Apple's solution they used for apple.com is ideal, but maybe it's the best option we have?