iPhone Size Classes

FURKAN VIJAPURA
1 min readDec 4, 2017

--

Size Classes allow you to categorize screen widths and heights, and set conditions based on those combinations. For example, you can decide that an avatar is 30 x 30 pt on a screen with Compact width, but 50 x 50 pt on a screen with Regular width, just because there is so much more empty space on the larger screen. Since the layout can be pretty different between Portrait and Landscape, or between iPhone and iPad, Size Classes are essential for customizing your layout beyond the normal Auto Layout constraints.

There are 3 types of Size Classes for both width and height: Compact, Regularand Any. By combining these, you will affect several devices at once. For example, Compact (width) x Regular (height) will target all iPhones in Portrait, but won’t affect Landscape or iPad.

What’s interesting is that Compact x Compact will affect iPhones in Landscape (except iPhone 6+, 7+, 8+), even though the screen has a rather large width. As result, it’s important to get familiar with the different combinations, as shown in the illustration below.

credited for : www.designcode.io

--

--