IPad Retina Resolution Vs Normal Resolution

2
votes

So I am about to create a full screen game for iPad. The retina display (new iPad) has a resolution of 2048 x 1536 pixels while the old iPad has resolution of 1024x768 pixels.

My question is, should I set width of my container div to be 2048 pixels and then use media queries to change dimensions and positions of different HTML elements based on window width? I will be using lots of absolute positioning and I am not sure how will that work between old and new iPad.

Or will the retina display still return 1024 in media queries?

Also, do I need two sets of images? One set of images for the retina display and one set of images (with half the size) for the old iPad display?

I am slightly confused. Thank you for explaining this to me.

1
htmlipadcssretina-display
I think you would benefit from reading this article: quirksmode.org/mobile/viewports.html. Basically, the pixels you specify in CSS are actually device-independent. – Jimmy Breck-McKye

1 Answers

2
votes

You should set it at 1024, and then target retina and higher resolution displays with device pixel ratio media queries.

Read more here: http://menacingcloud.com/?c=highPixelDensityDisplays