Correct way to serve HTML to iPads Retina display

Question

I'm developing an iPad web app exclusively for the Retina display.

So I was wondering what's the correct way to serve HTML content that fits in the Retina Display.

Because if I use this meta tag

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no">

the page is way bigger than the iPad screen and seems to ignore the fact that my body has a width of 2048px.

Is this some sort of compatibility thing?

Setting the initial-scale=0.5 seems to solve this issue, because the screen fits to the body.

But I'm not sure if this is the correct way to serve the Retina display.

Can anybody help me out here?

Answer 1

The Retina display works by having twice as many 'hardware/actual pixels' as 'logical pixels' in each dimension. That is, as far as the browser's concerned, you're still rendering to a display of 1024x768 (or whatever the screen-minus-chrome size is).

You should set your layouts up for that standard size, and use initial-scale=1 - then both retina and standard resolution displays will render the content the best they can.

Extra info, based on Johannes' comment below:

If you have a 'native resolution' .PSD (2048x1536px) to turn into a layout, this is how I'd do it:

• Work out what image-based assets you'll need: things like textures, fancy icons, images that can't be done with CSS (you can and should use CSS for gradients, shadows, transparencies, etc). Mark these with guides/slices so you can extract them to their own files conveniently.

• Duplicate the document and scale it to 50%: this is the 'logical pixels' document that you can use for taking measurements. If you need to answer 'How high is the header?' or 'what is the size of the text in the menu?', this is the document to use.

• Extract the image assets from both the original and 50% scale docs. Name the original scale assets with a '@2x' suffix (so you have body_background.png and body_background@2x.png).

• Set your html pages to use initial-scale=1, and dimensions to the 50%/logical pixels measurements. So - your overall page width should be 1024px, not 2048px.

• Code your CSS according to the logical pixels dimensions. Reference the normal-resolution assets from the 50% scale document as required.

• Use a media query in your CSS - querying device-pixel-ratio - to switch in the high-resolution assets as required.

This will give you a high-resolution retina display on retina devices, and a normal-res display on other devices. You won't get any noticeable increase in quality by creating everything at double size and scaling it down - certainly not enough to warrant working at double dimensions all the time.

Other people might have better workflows for the asset creation stuff - I don't do a lot of PSD -> layout work at the moment, but this works well enough for me.