Retina iPad Resolution Test

The following pages demonstrate the high resolution of iPads (with device-pixel-ratio 2), using a standard Bootstrap template page. Normally, retina iPads would us a pixel ration of 2 which shows the content twice as big as its physical resolution. For example, for iPad mini 4 that is 1536x2048, but it will display any page at 768x1024. By setting the body to the device's actuall pixel wdth, you can forse it to use the full resolution (using the right viewport meta tag). I only applied the width in landscape. Rotating to portrait would revert to 2x pixel ratio. The bottom of each page displays the clientWidth and clientHeight.

I've set this up for 1536x2048 for iPad Air and Mini 3/4, and 2048x2732 for iPad Pro only. Did not look into retina MBPs or 4K/5K iMacs, but the principle is the same.

Of course, this does not mean you should be doing this! It just shows you how small everything becomes on such high resolutions. (Also, I haven't adjusted anything else of the Bootstrap layout, so iPad Split View multitasking will change the layout too)

The bottom link shows an overview of different tables and their resolution and pixel ration.