iPad Retina display only using 1024 for webpages

Question

I have a bit of an issue, I am developing a full HD (1920x1080) website which I also want to be able to use on the iPad retina display (2048x1536) however the iPad is only showing that it has a resolution of (1024x768) despite the specs clearly stating otherwise (http://www.apple.com/uk/ipad/specs/)

If I create a div of width 1024 then it appears full screen on the iPad and a div of 1920 width forces the iPad to scroll?

Does anyone know why I cannot use the full retina display and am forced to 1024x768 resolution on the iPad?

Answer 1

That's an intended behaviour.

Since most web sites still specify their text size in pixels (12px), a retina screen would results in text that is much too small. To avoid this, Safari on the iPad 3rd gen and iPhone 4/4s tell web servers that they have 1/4 the resolution they really have. The text is then rendered in finer details by Safari but it also retains its intended size.

As a workaround, try setting the meta tag "viewport" in your site to allow for a greater resolution.

<meta name="viewport" content="width=device-width" />

Answer 2

Set your initial viewport size to half of it's original size thus creating a canvas that is double the size that the hardware returns (1024px * 2 = 2048px).