Quick Reference for iPhone, iPad Screen Resolutions

Apple’s newest phone, the iPhone 6/6 Plus, are released a bit ago. The new iPhone 6 screen size is both wider and taller and the iPhone 6 Plus also has a higher pixel density. Actually, when looking at an iPhone’s screen dimensions, there are a few different values for people especially web designers to consider. Here I’m going to get four important values defined.

iPhone Display Size / inches – The display size (or physical image size) is the physical size of the area where pictures and videos are displayed. The size of a screen is usually described by the length of its diagonal, which is the distance between opposite corners.

iPhone Screen Size / points – These points are the size that the device is using for coordinates. If you’re designing for the web (using CSS or JavaScript) these values will be helpful. iPhones use Retina screens which have a higher pixel density. This means they take the larger iPhone resolution and compares those pixels into a smaller space to make the image look sharper.

iPhone Rendered Pixels – This is the full number of pixels that are being rendered. This is the value you get when you apply the multiplier (1x, 2x, 3x) the device uses to the screen size in points. If you’re creating an image and want it at the max resolution, this is the size you’d use.

iPhone Physical Pixels – This is the actual screen’s pixel resolution. Physical pixels and rendered pixels are equal on all iOS devices, with one exception: iPhone 6 Plus. Its screen has a lower pixel resolution than what would be a natural @3x resolution; the rendered content is automatically resized to approximately 87% of the original size (from 2208 x 1242 pixels to 1920 x 1080 pixels).

iPhone/iPad Screen Size Comparison