Regular and Compact iOS display size breakdown for designers
I got super excited about the new multitasking madness since working on landscape support and a gigantic iPad Pro that landed in the Medium office. We’ve recently been working to ensure that anyone can read, write, and interact on Medium in any orientation and at any size.
As soon as I began testing out the various screen sizes and multitasking I got pretty lost about how everything worked together.
A quick search revealed:
iOS defines two size classes: regular and compact. The regular size class is associated with expansive space and the compact size class is associated with constrained space. — Apple Human Interface Guidelines
Pretty straightforward — but it glosses over how there are 15+ different screen widths to consider when working on universal iOS apps.
Here’s a quick breakdown of all possible viewport sizes with the current lineup of iOS devices. iOS has a bunch of screen sizes now!
On the iPhone and iPod Touch
- You can only get a regular width size class with the iPhone 6 Plus in landscape.
- All other iPhones are compact in width.
On the iPad
- Compact size classes are anything less than ~640 pts
- Regular size classes are anything larger than ~640 pts
- All viewports on iPad have regular height
Apple’s docs felt a bit fuzzy, so I put together a quick file which has all the exact artboards for regular and compact size classes.
I’ve used this document to help communicate specific details of Medium across all sorts of devices with our engineers. Let me know if you find it useful!
