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

<aside> 💡 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)

</aside>

iPads

<aside> 💡 For iPads, the threshold is between 597(compact) and 683(regular)

</aside>

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.