Considering viewports

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.