I was wondering what the delta was between the screen sizes of the different iPhones you need to support as an iOS designer. Did some math and realized that, even though not perfect because of rounding errors, going from an iPhone 5 to a 6, you gain about 1 (44×44 point) column and 2 rows. Same happens going from an iPhone 6 to a 6 Plus.
i5>i6: 1col, +2row
i6>i6: 1col, +2row
i5>i6: +2col, +4row
(unit = +/- 44pt)
If you want to add more functionality instead of content.
— Tim Van Damme (@maxvoltar) October 24, 2014Sketching on squared paper, I was curious to know how many rows and columns of tappable targets you could fit on the different iPhones. Some more math and I came up with these numbers, which I turned into a handy grid.
So, if you want to simplify things:
i4: 7×11 units
i5: 7×13
i6: 8×15
i6+: 9×17
Attached a little sketch pad. pic.twitter.com/m3JBb24pa0
— Tim Van Damme (@maxvoltar) October 24, 2014Here’s how I got to these numbers:
| iPhone 4 | iPhone 5 | iPhone 6 | iPhone 6 Plus | |
|---|---|---|---|---|
| Width (points) | 320 | 320 | 375 | 414 |
| Width/44 | 7.2 | 7.2 | 8.5 | 9.4 |
| Width rounded | 7 | 7 | 8 | 9 |
| Height (points) | 480 | 568 | 667 | 736 |
| Height/44 | 10.9 | 12.9 | 15.2 | 16.7 |
| Height rounded | 11 | 13 | 15 | 17 |
Each square in that image represents a minimal tappable target. Not perfect because of rounding errors, but damn handy to quickly sketch.
— Tim Van Damme (@maxvoltar) October 24, 2014If you follow this grid, you get a good idea how much content you can fit on any iPhone screen. Again, it’s not perfect (rounding, status bar not included), but hopefully it’ll help you save some time sketching your next app.