iOS size class study

Context: In mobile app/web development, there are a lot of factors determining the screen size: phones vs tablets, portrait vs landscape, full screen vs split screen. Sometimes a different layout or display logic is preferred based on how big the screen/window is. Apple defined a term called “size class”, which can be either compact or regular, but didn’t specify how big is regular and how small is compact.

Objective: Find the threshold (in points or dp) for iOS size class compact vs regular (mainly focusing on horizontal)

Reference: https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

iPhones

Device	Portrait size class	Landscape size class
iPhone 13 Pro Max	Not yet available as of Jan 5, 2022	ㅤ
iPhone 13 Pro	ㅤ	ㅤ
iPhone 13	ㅤ	ㅤ
iPhone 13 mini	ㅤ	ㅤ
iPhone 12 Pro Max	Compact width(428), regular height	Regular width (926), compact height
iPhone 12 Pro	Compact width, regular height	Compact width (844), compact height
iPhone 12	Compact width, regular height	Compact width, compact height
iPhone 12 mini	Compact width, regular height	Compact width (812), compact height
iPhone 11 Pro Max	Compact width(414), regular height	Regular width (896), compact height
iPhone 11 Pro	Compact width, regular height	Compact width, compact height
iPhone 11	Compact width, regular height	Regular width (896), compact height
iPhone XS Max	Compact width, regular height	Regular width (896), compact height
iPhone XS	Compact width, regular height	Compact width (812), compact height
iPhone XR	Compact width, regular height	Regular width (896), compact height
iPhone X	Compact width, regular height	Compact width (812), compact height
iPhone 8 Plus	Compact width, regular height	Regular width (736), compact height
iPhone 8	Compact width, regular height	Compact width (667), compact height
iPhone 7 Plus	Compact width, regular height	Regular width (736), compact height
iPhone 7	Compact width, regular height	Compact width (667), compact height
iPhone 6s Plus	Compact width, regular height	Regular width (736), compact height
iPhone 6s	Compact width, regular height	Compact width (667), compact height

💡

For newer iPhones (iPhoneX & above), the threshold is between 884(compact) and 896(regular)

For older iPhones (pre-iPhoneX), the threshold is between 667(compact) and 736(regular)

Device	Dimension
iPhone 13 Pro Max	428x926 pt (1284x2778 px @3x)
iPhone 13 Pro	390x844 pt (1170x2532 px @3x)
iPhone 13	390x844 pt (1170x2532 px @3x)
iPhone 13 mini	375x812 pt (1125x2436 px @3x)
iPhone 12 Pro Max	428x926 pt (1284x2778 px @3x)
iPhone 12 Pro	390x844 pt (1170x2532 px @3x)
iPhone 12	390x844 pt (1170x2532 px @3x)
iPhone 12 mini	375x812 pt (1125x2436 px @3x)
iPhone 11 Pro Max	414x896 pt (1242x2688 px @3x)
iPhone 11 Pro	375x812 pt (1125x2436 px @3x)
iPhone 11	414x896 pt (828x1792 px @2x)
iPhone XS Max	414x896 pt (1242x2688 px @3x)
iPhone XS	375x812 pt (1125x2436 px @3x)
iPhone XR	414x896 pt (828x1792 px @2x)
iPhone X	375x812 pt (1125x2436 px @3x)
iPhone 8 Plus	414x736 pt (1080x1920 px @3x)
iPhone 8	375x667 pt (750x1334 px @2x)
iPhone 7 Plus	414x736 pt (1080x1920 px @3x)
iPhone 7	375x667 pt (750x1334 px @2x)
iPhone 6s Plus	414x736 pt (1080x1920 px @3x)
iPhone 6s	375x667 pt (750x1334 px @2x)
iPhone 6 Plus	414x736 pt (1080x1920 px @3x)
iPhone 6	375x667 pt (750x1334 px @2x)

iPads

Device	Split mode	Portrait size class	Landscape size class
12.9" iPad Pro	2/3 split view	Compact width, regular height	Regular width, regular height
ㅤ	1/2 split view	N/A	Regular width (683), regular height
ㅤ	1/3 split view	Compact width, regular height	Compact width (~455), regular height
11" iPad Pro	2/3 split view	Compact width, regular height	Regular width (~795), regular height
ㅤ	1/2 split view	N/A	Compact width (597), regular height
ㅤ	1/3 split view	Compact width, regular height	Compact width, regular height
10.5" iPad Pro	2/3 split view	Compact width, regular height	Regular width, regular height
ㅤ	1/2 split view	N/A	Compact width (597), regular height
ㅤ	1/3 split view	Compact width, regular height	Compact width, regular height
9.7" iPad	2/3 split view	Compact width, regular height	Regular width (682), regular height
ㅤ	1/2 split view	N/A	Compact width (512), regular height
ㅤ	1/3 split view	Compact width, regular height	Compact width, regular height
7.9" iPad mini 4	2/3 split view	Compact width, regular height	Regular width, regular height
ㅤ	1/2 split view	N/A	Compact width (384), regular height
ㅤ	1/3 split view	Compact width, regular height	Compact width, regular height

Device	Dimension
12.9" iPad Pro	1024x1366 pt (2048x2732 px @2x)
11" iPad Pro	834x1194 pt (1668x2388 px @2x)
10.5" iPad Pro	834x1194 pt (1668x2388 px @2x)
9.7" iPad Pro	768 (regular) x1024 pt (1536x2048 px @2x)
7.9" iPad mini	768 (regular) x1024 pt (1536x2048 px @2x)
10.5" iPad Air	834x1112 pt (1668x2224 px @2x)
9.7" iPad Air	768x1024 pt (1536x2048 px @2x)
10.2" iPad	810x1080 pt (1620x2160 px @2x)
9.7" iPad	768x1024 pt (1536x2048 px @2x)

💡

For iPads, the threshold is between 597(compact) and 683(regular)

Recommendation

While in iOS app development it’s best to just use the traitCollection property instead of a hardcoded number, the number could be useful in some cases like making a website that matches mobile app layout, or trying to let the Android app match iOS experience.

There isn’t a single threshold that works for all devices, but using 680 could be a good enough option. It works for all the iPad cases, and will treat some iPhone landscape modes incorrectly as regular. Depending on the context this could be fine, because (1) many apps just decide to disable rotation on phone, (2) when phones do allow landscape mode, apps might be using the number to determine whether to chose a multi-column layout or a bottom bar based layout (see WWDC videos for design or engineering). For that purpose, choosing a multi-column with no bottom bar layout might be reasonable enough.