iOS Development: Resolution Pixel How much do you know?

iPhone screen size and resolution of some small posture 20160303

IPhone devices now have multiple resolutions , as listed in the following table,

Equipment	Screen Size	Resolution (PT)	Reader	Resolution (PX)	after rendering	PPI (DPI)
IPhone 3GS	3.5 inch	480 x	@1x	480 x	Empty	163
IPhone 4/4s	3.5 inch	480 x	@2x	640 x 960	Empty	326
IPhone 5/5s/5c	4.0 inch	568 x	@2x	640 x 1136	Empty	326
IPhone 6/6s	4.7 inch	375 x 667	@2x	750 x 1334	Empty	326
iPhone 6/6s Plus	5.5 inch	414 x 736	@3x	1242 x 2208	1080 x 1920	401

When I first saw the form above, I had three questions,

What does dpi and PPI mean.

What is the difference between PT and PX.

The iPhone 6/6s Plus Resolution is 1242 X 2208, and why the resolution changes to 1080 x 1920 after rendering.

In view of the above three questions, I follow the internal matter to ask Baidu, foreign affairs layout to ask the principle of Google, find some answers on the internet, the following is a simple answer. 1. DPI and PPI what the hell.

The DPI (Dots per Inch) is initially used to measure the number of points that are printed without an inch, which means that your printer can hit as many points in an inch. The smaller the DPI value, the less pleasant the picture is.

When the concept of the DPI is used on a computer screen, it should be called PPI (Pixels per Inch). Similarly: PPI is the number of pixel points that can be displayed per inch on a computer screen.

The Windows system default PPI is the 96,mac OS system default PPI is 72. The general cost of the retina screen of the desktop computer's PPI is between 72 and 120, using the PPI between 72 and 120 to design a basic guarantee that your work will look similar in most cases.

A Li Zilai said: The 27-inch Mac PPI is 109, or 109 pixels per inch. The display width (including the border) is 25.7 inches, the screen width is almost 23.5 inches, so 23.5 x 109 = 2560, this shows that the screen resolution is 2560 x 1440px.

Retina screen and PPI: The Retina screen was launched into the public eye when the IPhone4 was released, because the screen's PPI was too high for the human eye to see pixels. Technically they are twice times as many pixels in the same physical size as the previous generation, as shown in the following illustration,

In this case, not Su Ying the size of the laughing element, the element accuracy of the same size screen is increased twice times. The original pixel space now has 4 pixels, the pixel is 4 times times the original.

The IPhone 4 uses the Retina display, and in the same physical size, pixels multiply and reach 640 x 960 pixels. So there is a problem, how to let the original app run on the new phone. To run the app before, Apple introduced a new concept point, the concept of which is important in iOS development, which developers rarely pay attention to. The iPhone 4 screen size continues to be 480, but the units are not pixels, but dots.

In the iphone 3GS, a point equals a pixel, which means that the dots and pixels can be exchanged directly; in iphone 4, one point equals two pixels; in iphone 6 Plus, one point equals 3 pixels.

The iphone 4 and iphone 3GS screen sizes are actually the same, all 3.5 inches. The same point, in fact, looks the same, except that the IPhone 4 has more pixels in the unit inch and looks more delicate. 2. What is the difference between PT and PX.

PT (point) represents the pixel, px (PIEXL) represents pixels, this is two looks like, but completely different units, in some cases they are 1:1, often confused, or the production process is not clear, resulting in inaccurate results. In the drawing software you can see the basic unit settings inside the two choices,

PX, which is pixel, represents pixels. is the smallest unit displayed on the screen, and a pixel may reach a size that is unrecognizable to the naked eye on a high-resolution screen,

PT, which is point, is a standard length unit, defined on 1pt = 1/72 inches, and the females, like the centimeters and meters we are familiar with, can clearly indicate the length of 1pt.

PT is also a common identification of the size of the unit, in the drawing and clerical software, and so almost all using PT as a font ruler unit, it is generally called [word level], usually refers to Pt.

PT and PX Understand favor is actually not difficult, in the application is also quite simple, in most cases the application of a theory is: when the purpose of the design for screen browsing, it tends to use PX to facilitate the mastery of the details, and if it is to do the demand for output printing, the use of PT is a better choice.

In the iphone 3GS era, the resolution and Point is 1:1, to the iphone 4, resolution and Point is 2:1 of the relationship, while on the iphone 6 Plus devices, resolution and Point 3:1, so in order to facilitate developer development, the unified use point in iOS describes the size of the interface elements, so the difference in resolution is not a problem for developers, at the development level, developers do not need to resolution and point of the unit conversion, completely feel the difference and resolution .

When we say the resolution of an iPhone device, we actually use the PT (dot) as the unit to describe the resolution , and when we discuss the size of the picture with the UI, It's actually px (pixel) as the unit that describes the picture. 3. The iPhone 6/6s Plus Resolution is 1242 X 2208, and why the resolution changes to 1080 x 1920 after rendering.

With the exception of iphone 6 Plus, all other iphone PPI are consistent, all 326, with @2x footage.

But the actual PPI for the iPhone 6 Plus is 401, and in theory Apple should use 401/326 x @2x = @2.46x's material, but this wonderful arm is hard for developers to cut, so Apple used the @3x material to make it easier for developers, Then zoom to the @2.46x screen, that is, zoom to 2.46/3 = 83%, in fact, the Apple picked a close to the ratio of 87%. In this way, the ratio of physical resolution to Virtual resolution is 87%, i.e. 1080/0.86 = 1242,1920/0.87 = 2208. The advantage is that developers are more convenient, such as when preparing material, the font size can be directly adjusted to 3x.

Let's take a look at the resolution and pixel comparison of different iPhone devices,

Mobile Phone	PT	px	PPI (DPI)
IPhone 4/4S/5/5S/5C/6	10	20	326
iPhone 6/6s Plus	10	30	401

For the iphone 6 Plus mobile, the ratio of PT and PX is 1:2, and after the iphone 6 Plus comes out, this ratio reaches 1:3, while the resolution reaches 1242 x 2208 (using The iphone 6 Plus screenshots, and then uploaded to the computer to see that this is the resolution , and the iphone 6 Plus actual resolution of 1080 x 1920, resolution The ratio is 1.15:1. For PPI, theiPhone 6 Plus was 326 before it turned 401.

Material resources Change @3x, in actual development, the material is usually UI Meimei responsible for providing, from @2x to @3x, the material resolution increased by 1.5 times times, such as a @2x material size of 44x44, then the response @3x size Resolution For 66x66, the way the file name is still unchanged, $ (img_name) @3x.png, named good file into the resource folder, as long as the code newspaper, the file name unchanged.