Following yesterdays Apple event, I spent the morning perusing my RSS feed, as I do most mornings. One of the articles from developer Michael Tsai pondered the screen sizes of the new iPhone models. He compiled a list of most available models (including the older 5s/SE that’s no longer as easy to buy) and their viewport sizes in CSS pixels, or the unit he chose to describe them with; points.
| iPhone Model | Width | Height |
|---|---|---|
| 5s/SE | 320 pts | 568 pts |
| 12 mini | 360 pts | 780 pts |
| 8/SE 2 | 375 pts | 667 pts |
| 11 Pro | 375 pts | 812 pts |
| 12/12 Pro | 390 pts | 844 pts |
| XR/11/11 Pro Max | 414 pts | 896 pts |
| 12 Pro Max | 428 pts | 926 pts |
The iPhone 12 Mini is the model that I believe will be the “people’s iPhone”. That is to say, it’ll most likely be the top seller. With that in mind, it’s interesting to note the width of the device. 360 CSS pixels. I’ve noticed in my day job that our designers have designed with the iPhone 8/SE 2 in mind, that is to say that they make their most narrow designs 375 CSS pixels. While that might be a problem in and of itself since there’s still plenty of devices out there that is reporting 320 CSS pixels and you should cater to these too, it’s interesting to note that our designers will at least have to shave off 15 CSS pixels in their future designs, since this will very likely be the majority for the future.
Then again, if we all just built stuff fully flexible and did not cater to a specific minimum viewport, this wouldn’t be a problem at all.