In last week’s show, I said that iPhone X actually has a bigger screen than iPhone 8 Plus, even though the phone’s physical size is closer to iPhone 8. In the live chatroom for the show, George from Tulsa called me on that statement. He pointed to an article on phonearena.com/… where Victor H had determined that iPhone 8 Plus actually has the bigger screen.
Now I could have gone over and just read what Victor had written but what fun would that be? You know where this is going, right? I had to prove (or disprove) this myself.I’m glad I did my own work because while Victor H did come to the correct conclusion, he had a pretty major mistake in the intro (he shows the screen resolution of iPhone 8 Plus completely wrong) and he does some unnecessary calculations along the way as well (using points instead of pixels). Victor also references someone else’s assumptions in drawing the device, while I decided to make my own drawings.
Before we proceed, let’s address what you might be thinking, “how could a phone with a larger diagonal dimension ever have a smaller area?” When two engineers marry, this is the kind of discussions that happen over dinner. Steve pointed out a way to “get” how the X’s screen could have a bigger diagonal but a smaller area is to imagine a super LONG diagonal but a very narrow screen, like 10 inches diagonal but .25 inches wide. That would have very little square area even though it has a huge diagonal dimension. Hopefully, you can visualize this extreme but illustrative case. Now, let’s have some fun with geometry!
Let’s set one metric first which doesn’t take much to figure out. iPhone X has significantly more pixels of information on screen than iPhone 8 Plus. From Apple’s iPhone Comparison Page, we can see the number of pixels of the two phones:
- iPhone X: 2436 x 1125 pixels at 458 ppi (pixels per inch)
- iPhone 8+: 1920 x 1080 pixels at 401 ppi(pixels per inch)
Simply multiplying the pixels, we can see:
- iPhone X: 2436 x 1125 = 2,740,500 px2
- iPhone 8+: 1920 x 1080 = 2,073,600 px2
If we divide the two square pixel numbers, we find that iPhone X has 32% more pixels displayed than iPhone 8 Plus.
But the argument was about the physical size of the display, not the number of pixels.
We can start at a coarse level and compare the two phones by dividing each of the square pixel numbers we just calculated by the square of the linear pixel density that we know. We have to square that pixel density because it’s in pixels per inch which is one-dimensional.
- iPhone X: (2436 px x 1125 px) ÷ (458 px/inch) 2 =13.065 inch2
- iPhone 8+: (1920 px x 1080 px) ÷ (401 px/inch) 2 = 12.895 inch2
This coarse calculation tells us that iPhone X has a screen that’s 1.3% larger than the 8 Plus. You are all yelling into your devices right now, “But what about the NOTCH, Allison???” Well, of course, we must account for that because the NosillaCast is known for its thoroughness and attention to detail. Let’s take this up a notch (see what I did there?)
The problem though is that Apple doesn’t give us the dimensions of the notch in an easy to find its area. I discovered the Human Interface Guidelines for iPhone X over at developer.apple.com to see if I could learn a little bit more. We’ll come back to some important points in these guidelines in a bit.
While Apple still didn’t give any exact dimensions in the guidelines, they did provide us with a scalable vector graphic of the face of the phone. Scalable is good because that meant I could take the image and open it in Affinity Designer, a vector-based tool, and start measuring it. I had to make a leap of faith that Apple created this drawing to scale. If they haven’t, I’ve lost all faith in what is right in this world. Remind me to tell you a story some time of Lindsay’s 5th grade Mission project and drawing things to scale.
The tricky bit is that the drawing is scalable, so how do I make it the exact right size? I created a document in Affinity Designer first that was exactly the dimensions of iPhone X screen, 2436 x 1125 pixels. Then I added the screen outline onto the document and scaled it until the screen size lined up perfectly with the document edges. Then I locked that layer.
Unfortunately, I can’t determine the size of the notch directly using Affinity Designer but I can draw new shapes on top of their geometry and Affinity Designer will tell me my dimensions over in the transform panel.
I started by drawing a rectangle over the notch. It measured at 89 x 624 pixels = 55,536 pixels2. If we divide that by our pixel density (squared) of 458 ppi, we need to subtract 0.265 inches2 from iPhone X screen. That brings iPhone X down to 12.8 inch2 vs 12.895 inch2 for iPhone 8 Plus. The 8 pulls ahead now by 0.7%! Now we’re getting somewhere.
Now our little friend Victor H had taken someone else’s drawing where they did more than measure the size of the notch. Oh no, these people make me look like a normal, sane person. They removed the rounded corners of not just the four corners of the display but took into account the rounded corners of the notch itself!
Accounting for the four corner rounds is a reasonable thing to do, but I wasn’t going to be out-nerded so I did them all.
There are three rounded corner sizes for which we must (or at least I must) account. I designated the diameter with the letter b for the biggest (the four corners of the display), the letter m for the medium-sized interior corner of the notch, and finally the letter s for the teeny tiny curve where the notch meets the top edge of the phone. We’ll be using Db, Dm and Ds as my three corner diameters.
So we have the entire screen rectangle which is W x H for width x height. Then we’ve got to subtract Wn x Hn for the notch width and height. Then we have to subtract out the area of the four rounded corners.
The easiest way to calculate these areas is to subtract the area of a circle (whose arc defines the rounded corner) from the area of the square circumscribing that circle. If it were only one corner, we’d have to divide that difference by 4, but since we have 4 external corners on the display, the 4s cancel out.
The area of the square circumscribing the circle is simply Db2, and the area of the circle is πDb. So to remove the area of the four rounded corners, we subtract (Db2 – πDb) .
Is anyone still following this? It’s ok, it entertains me and that’s enough some days.
Now that we have the basic idea down of how to deal with the rounded corners, it gets faster. The middle-sized radius on the inside of the notch actually adds to the available area, while the teeny tiny small rounded corner where the notch meets the top edge of the phone again subtracts. Oh, and don’t forget there are 2 each of the small and medium roundy bits on the notch, not 4 like on the display’s main corners. So for the ones where there’s 2, the formula becomes:
- subtract out (Ds2 – πDs)/2
- add back in (Dm2 – πDm)/2
So here’s our formula in all its glory:
iPhone X screen area = (W x H) – (Wn x Hn) – (Db2 – πDb) – (Dm2 – πDm)/2 + (Dm2 – πDm)/2
Correction: More accurate measurements so some values have changed:
- W = 2436
- H = 1125
- Wn = 86
- Hn = 627
- Db = 211
- Ds = 38
- Dm = 125
Plugging in all the numbers, iPhone X screen is 2,678,545 pixels2
Dividing by the iPhone X’s pixel density of 458 ppi squared, and the iPhone 8 Plus by it’s pixel density of 401 we get a grand final screen size of…
iPhone X: 12.77 inches2
iPhone 8+: 12.90 inches2
And we have it, iPhone 8 Plus screen is bigger than iPhone X screen by 1%. As much as it pains me to admit it, George was right.
I typed all of these equations into the blog post, but that’s not how I actually developed the formulas. I grabbed my trusty 12.9″ iPad Pro with Apple Pencil and the Notability app and went to town drawing circles and squares and scribbling away to create the equations. I suppose I could have used a pencil and paper, but I love using the Pencil and having the document already digital instead of having to scan in if I want to save it.
Now that we have that settled, I promised I’d talk a little bit more about the Human Interface Guidelines for iPhone X.
The guidelines explain that developers should provide a full-screen experience, extending backgrounds to the edges of the display both vertically and horizontally. But then they go on to explain that content should be centered and symmetrically inset so nothing gets obscured by the following things:
- Clipping on those rounded corners
- Obscured by the indicator for accessing the Home screen
- Underlapping the status bar, navigation bar, toolbar, and tab bar
That’s a lot of stuff to avoid! They also point out that the status bar is taller on iPhone X than on other iPhones, so developers might be in trouble who assumed a fixed size for the status bar.
The guidelines show a Safe area with margins all over the place, leaving a much smaller rectangle than we’ve calculated!
That got me thinking that I really should compare Apples to Apples (if you’ll forgive the obvious pun) and look at the Human Interface Guidelines for iPhone 8 Plus. Well guess what? To the best of my Google Fu, they don’t exist. I would have been willing to settle for guidelines for 7 or 6 Plus, but I couldn’t find those either!
I can only imagine that iPhone 8 Plus has safe areas too, but I can’t compare them. I saw a note in the guidelines for iPhone X that referred to information inside UIKit, so I downloaded Xcode (a 9.93GB download) to see if I could find some templates in there, but guess what? They don’t have iPhone 8 Plus listed as an option! I complained about this in Facebook and Claus Wolfe suggested it’s in the beta for XCode, but I was kind of exhausted by this time and never pursued how to go through the developer program to find the beta of Xcode.
In conclusion, George was right. By the way, after my post about NIST and now this, it has been suggested that I need to get out more…