Screen sizes and aspect ratios of iOS and Android devices

Here is a small research I did of screen resolutions and aspect ratios. I think it’s useful to have it all in one place. It’s also very interesting to see different devices’ resolutions side by side.

Aspect ratios of Android devices

Aspect ratios of Android devices

Aspect ratios of iOS devices

Aspect ratios of iOS devices

In the Sketch file you can see screen resolutions of all Apple and Google devices (phone and tablet) and possible aspect ratios. It is safe to say that these cover almost all Android devices, and all iOS devices. Note that these are absolute screen resolution, which means they don’t necessarily reflect the physical size of the screen because of the different screen densities.

All Apple and Google devices' resolutions

All Apple and Google devices' resolutions

E.g. you might think that iPhone 6 Plus is a device similar to iPad judging by the resolution, but in reality there is a difference in screen diagonal of 4.2” in favor of the iPad.

You can see the difference of iPhone 6 Plus resolution and physical size of the screen

You can see the difference of iPhone 6 Plus resolution and physical size of the screen

That’s why everything needs to be defined using density independent units. For Android we use “dp” and “sp” (sp is used for font sizes, dp for everything else) and on iOS we use “pt”. Everything is defined for baseline density (mdpi for Android, non-retina for iOS). From there the framework scales UI to keep it physically the same when rendered on different screens. In addition to that, If we want our interface to look crisp on all devices, we need to prepare assets to match the densities.

Android densities

ldpi, mdpi, hdpi, xdpi, xxdpi, xxxdpi

iOS densities
@1x, @2x, @3x

You can read more on this subject here, here and here.

If you’d like, you can download Sketch (3.2) file and look at the examples here.