iPhone screen adaptation, history and current situation

The original iPhone

In 2007, the first generation iPhone was released, with a screen width and height of 320 x 480 pixels. The following is also arranged in the order of width and height. This resolution remained unchanged until the iPhone 3GS.

At that time, iOS apps only supported absolute positioning. For example, if a button had (x, y, width, height) = (20, 30, 40, 50), it would mean that it was 40 pixels wide, 50 pixels high, and placed at the position of (20, 20) pixels.

iPhone 4

In 2010, iPhone 4 was released, which was the first to adopt the Retina display. While the physical size of the screen remained unchanged, the pixels were doubled to 640 x 960 pixels.

This raises a question: how to make the existing apps run on the new phone? One advantage of the iPhone is that it has many excellent apps. If the existing apps are not compatible, it is equivalent to giving up this hard-earned advantage, which is very unwise.

Every time the iPhone screen changes, such as the transition from iPhone 3GS to iPhone 4, iPhone 4 to iPhone 5, and iPhone 5 to iPhone 6, Apple needs to find a way to solve the above compatibility issues.

In order to run the previous App, a new concept point is introduced. The concept of point is very important in iOS development, but actual users rarely pay attention to it. The screen size of iPhone 4 continues to remain 320 x 480, but the unit is not pixel, but point.

• In iPhone 3GS, 1 dot is equal to 1 pixel, which means that dots and pixels are directly interchangeable.

• On iPhone 4, 1 point equals 2 pixels.

In this article, I treat points and pixels as one-dimensional length units rather than two-dimensional area units, which is more natural to me, so 1 point equals 2 pixels. Other articles may say that 1 point equals 4 pixels, which actually means that 1 point occupies an area of ​​4 pixels, which is not wrong. Pay attention to the context.

The screen size of iPhone 4 and iPhone 3GS is actually the same, both are 3.5 inches. The actual size looks the same for the same point. It's just that iPhone 4 has more pixels per inch, so it looks more delicate.

When developing iOS, it is more convenient to use points as the basic unit. The following table compares:

The screen mode here can be roughly understood as how many pixels are equal to one dot. 2x means that one dot is equal to 2 pixels.

Summarize the unit

• The physical length of the phone screen is measured in inches. For example, the iPhone 4 screen is 3.5 inches, the iPhone 5 is 4 inches, and the iPhone 6 is 4.7 inches. The numbers here refer to the physical length of the diagonal of the phone screen.

• Screen pixels, for example, the iPhone 3GS screen is 320 x 480 pixels, and the iPhone 4 is 640 x 960 pixels. The pixels here can be imagined as the small luminous dots on the screen that are actually used to display colors.

• Points are a unit used when developing apps. They are virtual units that do not actually exist, so points are sometimes called virtual points. Points are used to mask the differences between screen devices and to be compatible with previous programs.

The number of pixels per inch is called ppi (pixel per inch). The screen of iPhone 4 is 640 x 960 pixels and 3.5 inches. We don't have the actual size of width and height, so we roughly calculate its ppi based on the diagonal. Taking pixels as the unit of length, according to the Pythagorean theorem, the diagonal is 1154 pixels. The actual length of the screen diagonal is 3.5 inches, which is 1154 pixels divided by 3.5 inches, which is 330ppi. The official number is 326ppi. When the pixels are too dense, exceeding 300ppi, the human eye cannot distinguish each pixel. Therefore, the screen of iPhone 4 is called Retina display. Retina means retina in English.

After iPhone 4, (x, y, width, height) = (20, 30, 40, 50), which means the height is 40 points, the width is 50 points, and it is placed at the position of (20, 20). This processing method automatically converts the previous unit of pixels to the unit of points, so that iPhone 3GS applications can run on iPhone 4 without modification.

Text, color, etc. are vector data, so they will not be distorted when enlarged. The original iPhone 3GS program runs on iPhone 4, and the text is displayed very clearly.

However, images are not vector data, so they are processed differently. Suppose the image example.png is 30 x 40 pixels (the unit here is pixel, and the unit of digital images is usually pixel). When this example.png is used on iPhone 3GS and iPhone 4, it occupies 30 x 40 points on the screen. Because 1 point is equal to 2 pixels on iPhone 4, a 30 x 40 pixel image occupies a 60 x 80 pixel screen, so this image will look blurry on iPhone 4.

During development, in order to make the image clear, it is necessary to adapt the image. At this time, you need to prepare two images with the same content and put them in the same directory.

example.png // 30 x 40 pixels

[email protected] // 60 x 80 pixels

When example.png is used in the program, the corresponding image will be automatically selected according to the screen mode. In 1x mode, example.png will be selected, and in 2x mode, [email protected] will be selected first. If [email protected] does not exist, example.png will be selected.

The image has 1x mode and 2x mode, just like the screen. In iPhone 6 Plus, there is also 3x mode, and the principle is the same.

When iPhone 4 selects the image [email protected], it will generate an image with a size of 30 x 40 points and 2x mode. At this time, the image will look very clear. However, in the old program that has not been adapted, [email protected] does not exist, so example.png is selected, and an image with a size of 30 x 40 points and 1x mode is generated, which looks blurry. However, the number of screen points they occupy is the same.

iPhone 5

In 2012, Apple released the iPhone 5. We compared all models, still using points as the unit.

Compared with iPhone 4, the width of iPhone 5 remains the same. The height increases by 568 - 480 = 88 points.

In iOS development, the number 44 is quite special. The iOS interface guide states that human fingers have a certain size, and it is difficult to click on an area that is less than 44 points. Twice as much as 44 is 88.

When the original program is not adapted to iPhone 5, it can run normally, but the extra 88 points will be automatically divided into two parts, resulting in black edges on the top and bottom. I can't find a good-looking picture.

So how can we tell iOS that our app is compatible with iPhone 5? Let's digress a bit and talk about the startup image.

When you click the icon on the home screen and enter the App, a picture will be displayed immediately. This picture is the launch image. When the App is officially launched, it needs to do some initialization processing, which is usually time-consuming. The launch image appears first, which can make users feel that the system responds immediately and reduce the anxiety of waiting.

Each model, such as an app that supports both iPhone and iPad, needs to specify a startup image for iPhone and iPad respectively. When an old iPhone 4 app is run on iPhone 5, and there is no iPhone 5 startup image, it uses compatibility mode, leaving black borders on the top and bottom. When a new startup image is specified for iPhone 5, the system thinks that the application has been adapted for iPhone 5, and no black borders will be left on the top and bottom. The following is the WeChat startup image, which should be familiar to everyone.

The Earth that appears in the WeChat startup image is called the Blue Marble, and was taken by the crew of the Apollo 17 spacecraft on December 7, 1972. This photo was very shocking at the time, and it was the first time that ordinary people could directly see the entire Earth through a photo. See the question Why is the Earth image on the WeChat startup interface not transferred to the China section? Does this damage the user experience?

The WeChat startup image is adapted for iPhone 5 and is obviously narrower and longer compared to iPhone 4.

Typical iPhone applications (except games) often have a navigation bar on top, a toolbar or tab bar on the bottom, and a large content area in the middle. iPhone 5 is elongated, so it is not a big deal to adapt the application, as the content in the content area is basically generated dynamically. When adapting, you can simply keep the top and bottom unchanged and elongate the content area in the middle. Note that the height of the navigation bar and toolbar is also 44 points. Below is a comparison of the same application on iPhone 4 and iPhone 5.

AutoLayout

At this point, the weakness of traditional absolute positioning is exposed. At this time, the iPhone has two different screen sizes based on points, and including the iPad, there are 3 sizes (some apps are compatible with both iPhone and iPad, called Universal).

Since the release of iOS 6, an AutoLayout technology has been available for iOS development. AutoLayout is like a web page, specifying the relative positions of View, Button, and Text, such as how much to the left, how much to the right, how much to the center, etc. For example, the following simple layout.

Suppose the upper left area is view1, the upper right area is view2, and the area below is view3. AutoLayout will say:

 view1.left = 20                 // The left side of View1 is 20 points away from the border  
 view1.top = 20                  // The top edge of View1 is 20 points away from the border  
 view2.right = 20                // The right side of View2 is 20 points away from the border  
 view2.top = 20                  // The top edge of View2 is 20 points away from the border  
 view2.left = view1.right + 20   // The left side of View2 is 20 points away from the right side of View1  
 view2.width = view1.width // The width of View1 is equal to the width of View2  
 view2.height = view1.height // view1 height equals view2 height  
 view3.left = view1.left // view3 is left aligned with view1  
 view3.right = view2.right // view3 is right aligned with view2  
 view3.top = view1.bottom + 20   // The top of view3 is 20 points away from the bottom of view1  
 view3.bottom = 20               // The bottom of view3 is 20 points away from the border  
 view3.height = view1.height // view3 height equals view1 height  

After specifying the constraints above, AutoLayout will automatically calculate the corresponding layout. I wrote it in a rather complicated way. In fact, many operations can be specified by dragging the mouse, and it is not necessary to use code. But even if you use code, there are also abbreviated methods. The following is the interface in the xib when dragging the mouse to specify constraints.

And absolute positioning will directly say

 view1.frame = (x1, y1, width1, height1)
 view2.frame = (x2, y2, width2, height2)
 view3.frame = (x3, y3, width3, height3)

Absolute positioning does not specify constraints, but allows developers to accurately specify the actual coordinate size of View, Button, Text, etc.

For one screen, absolute positioning may not be much different from AutoLayout, and absolute positioning may even be more convenient. But when you need to adapt to multiple screens at the same time, AutoLayout does not need to be changed at all. Absolute positioning needs to be calculated one by one according to the screen size. For example, in landscape mode, under AutoLayout, it automatically becomes:

Here is just the layout of 3 controls. When there are more controls and the screen size increases, the advantages of AutoLayout become apparent. Another advantage of AutoLayout is that it can easily support multiple languages. In different languages, the length of the same meaning text is different, and AutoLayout can automatically adapt.

In iOS 6, AutoLayout was not widely used because the screen sizes were relatively small. In iOS 7, many people started to use it. Now it is iOS 8, and iPhone 6 and iPhone 6 Plus need to be adapted. AutoLayout is the trend and cannot be used without it.

iPhone 6 and iPhone 6 Plus

Things changed again in 2014 with the release of the iPhone 6 and iPhone 6 Plus. Compare all iPhone models again.

Screen sizes are split again. But let's compare the aspect ratio of the iPhone 5 and iPhone 6.

It can be seen that although the screen sizes of iPhone 6 and iPhone 5 have changed, their ratios remain the same. They are both 9 ÷ 16 = 0.5625 screens.

When an old iPhone 5 app is running on an iPhone 6, if it is not adapted, the old app will automatically scale up and fill the new phone, and the old app can run normally. This solution can be considered automatic adaptation. However, because the old app is stretched, the overall look is a bit blurry, and it cannot make better use of the large screen space.

When developers need to manually adapt, just like the transition from iPhone 4 to iPhone 5, specify a new startup image in the new program. When the startup image is specified, the screen resolution has become the required size. At this time, AutoLayout is used for layout, and the same code can support multiple models. The new phone has a larger screen, more virtual points, and can display more content.

It is worth noting that the iPhone 6 Plus has a width and height of 414 × 736 points. In 3x mode, ideally, it should have 1242 × 2208 pixels. But the actual pixels of the iPhone 6 Plus are 1080 × 1920, which is a little less than the ideal value. The iPhone 6 Plus handles this by slightly reducing the overall program. The resolution is very high, so this difference is actually not noticeable.

Why do we need to do this? Where do the numbers of logical points for the screen width and height of iPhone 6 and iPhone 6 Plus in the table above come from? I will guess the reason below, but I cannot confirm it.

Let's look at the iPhone 6 first, which is relatively simple. The aspect ratio of the iPhone 6 screen is the same as that of the iPhone 5. Using the diagonal to calculate, it is enlarged by 4.7 ÷ 4 = 1.175 times. Using this number, multiplying the 320 x 568 dots of the iPhone 5, ignoring the error, it is roughly the 375 x 667 dots of the iPhone 6 screen. It should be noted here that the diagonal calculation can only be used when the aspect ratio of the screen is the same.

According to the above method, the iPhone 6 Plus should get 440 x 781 points, but it is actually 414 × 736 points. I guess it is because the iPhone 6 Plus screen is obviously larger, and the same size of points on the large screen will make people feel smaller, so the actual size of each point is enlarged to get fewer points. The human eye will have an illusion when looking at things, not in isolation, but in comparison with the surrounding environment.

After determining the number of dots, the pixel size of 1080 × 1920 (many HDTVs have this size) should be 1080/414=2.6x, but the number 2.6x is too troublesome to develop, so it is processed according to 3x. In fact, if the pixel reaches 1242 × 2208, it can also be accurate to 1:1 at 3x, which would be better. However, considering the comprehensive factors such as battery, processor, screen size, etc., today's technology may not be able to achieve such a level of detail.

The above is just speculation, I believe those phone parameters were determined after repeated consideration. iPhone 6 Plus, a product between mobile phones and tablets, has undergone a lot of special treatment.

From the analysis, we can see that in order to adapt to multiple models, the number of startup images of the program has gradually increased. To solve this problem, after iOS 8, you can use xib to build the startup interface, so that the same startup interface can be adapted to multiple models, reducing the space occupied by the startup image.

suggestion

Future applications should use AutoLayout instead of absolute positioning.

Design interfaces in a similar way to web pages. Designers and programmers should try to think in points instead of pixels. For example, if you need to make a 44 x 66 point button, multiply it by 2 for 2x mode and by 3 for 3x mode. This way of thinking can roughly estimate the actual physical length. 44 points is the height of the navigation bar and toolbar on a mobile phone. If you think in pixels, it is easy to make the picture too large or too small.