About Iphone6/6plus resolution and image resolution (i)

IPhone 6, 6 Plus, gives iOS developers a more headache with screen adaptation issues. The previous iphone 5 was only a little higher on the screen compared to IPhone4, and now the width and height have changed.

first, let's look atScreen Physical Resolution(so to name) withDisplay resolution the difference. the physical resolution is the width and height of the screen pixels. And the screen size is fully proportional. iphone Size 3.5-inch, 4.0-inch, 4.7-inch, 5.5-inch,The width of the physical resolution is 320,320,375,414, that is, the screen size we see is the physical resolution size, the wider the screen, the greater the physical resolution. can be imagined as a physical width. Display resolution, which means that the screen can bebest resultsThe pixel size of the displayed picture. Attention is the best effect, that is, if the image resolution is smaller, there will be a vague sense, the resolution is larger, and will not increase the clarity, at least we human with the naked eye is not visible clarity has ascension. This is the best effect, which is the display resolution of the screen, which can be understood as a picture pixel to hold. There is a value that can measure the relationship between the two--ppi, Baidu it means the number of pixels per inch, that is, the number of pixels that can be accommodated without inches in length. The length corresponds to the physical length, and the pixels correspond to the picture pixels displayed. In fact, the physical resolution here is the number of coordinates we used in the development process.

For example IPhone4 previous screen physical resolution and display resolution are 320*480, that is, the screen into 320*480 a small box, Each small square can show a small picture of 1 pixels long and wide. And it is shown with the best results, without stretching, even if you put a picture of 2*2. This is entirely determined by the material on the screen. this is @x,1 times the origin of the graph. 1 time times, is the display resolution relative to the screen Span style= "Color:rgb (51,153,153); FONT-SIZE:14PX "> resolution to derive a multiple.

from IPhone4 onwards, until IPhone6 ( Excluding plus), the display of the screen has been greatly improved, iPh one4 the physical screen size has not changed, but the displayed picture pixel length is increased by one. That is, the number of pixels accommodated in the unit length is increased by one-fold, that is, the PPI increases by one, from the original 163 to 326. The picture shows the effect is obviously higher than the original, without the previous grain feeling. This is called retina technology, the naked eye has been indistinguishable from individual pixel "particles." This is the origin of @2x,2 times. twice times, a control in our code that is set in size requires a picture that is twice times the length and width to fill.

IPhone6 Plus, this special thing has changed again (users use a big screen is cool, we developers hate it). If you follow the previous twice-fold relationship. The physical width of the 6P is 414, then its display width should be 828, but the development of technology to now, the various manufacturers are spelling parameters, Apple is not far behind, so the introduction of a new screen, the new screen PPI reached 401, that is, the same width of the screen has been more than the original number of pixels have been upgraded, Not to mention the width is wider than the original, so that two factors multiplied: 5 as the standard, (414/320) * (401/326) *640 (this is the base) is approximately equal to 1018.49, close to 1080. As for 1080 and PPI401 which is because, which is the fruit, I do not know, anyway, the relationship between the two is such a relationship. This means that the width of the 6P display resolution is 1080, and the height is proportional to 1920. That is to give a classification rate is 1080*1920 picture full-screen display, will achieve the best results, and then small will stretch, then big will not be more clear (may also lose performance).

so the question comes, 6P above should use several times of picture, twice times obviously already unsuitable. If it is full-screen, 1080/320 about 3.37,1080/375 is about 2.88, so the combination of IPhone5 and IPhone6, using 3 times times the picture. This is the origin of the @3x,3 times chart.

First we turn to a set of Iphone5,iphone6 and Iphone6 plus some data comparisons:

iphone5/s iphone 6 iphone 6 Plus
Size 4 "4.7" 5.5 "
Viewport ' s device-width (in CSS pixels) 320 375 414
Viewport ' s Device-width (Android device with same resolution Reference) 360 360 400
Device Pixel Ratio pixel ratio 2 2 3 (approximate Value
Rendered Pixels render pixels (default viewport size * DPR) 640x1136 750x1334 1242x2208
Physical pixels physical pixels (cell phone display pixels) 640x1136 750x1334 1080x1920
Number of pixels per inch of PPI 326 326 401

Status bar High (PX) 40 40 60

title Bar    navigation bar height   (px)                              ,         &NB Sp           +                   &NBS     P              

tab bar    Bottom height   (px)                              ,         &NB Sp               98                   98 &nbs P                   147

Desktop icon   (px)                                    ,         &NB Sp                                                    

Picture resource suffix name @2x @2x @3x

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

About Iphone6/6plus resolution and image resolution (i)