In the above image, screen size means height and width given in points. But what we do we take screen width and height in pixels. Many designers use 640*960 as screen size that is the resolution of retina devices. Can anyone explain to me what exactly the screen size mentioned in points and resolution in pixels are, when to use them and why.
Pixels
When working on a design for iOS, work in either an artboard of 750 x 1334 (@2x) pixels or 375 x 667 (@1x). When you use Sketch you can also export to higher or lower resolutions. That's why it is OK to work in the lower resolutions of iOS. See image below.
Points are just a tool to help with different resolutions, as you will read down below.
There's a downside to working on a @2x or @3x. When you scale down, you might have 'half pixels'. For example, if you have text that's 17px in size and you scale it down to @1x, you get 8,5px. Be cautious of that.
Points
Check out this answer on another similar question on UX Stack Exchange.
A pixel on iOS is the full resolution of the device, which means if I have an image that is 100x100 pixels in length, then the phone will render it 100x100 pixels on a standard non-retina device. However, because newer iPhones have a quadrupled pixel density, that same image will render at 100x100 pixels, but look half that size. The iOS engineers solved this a long time ago (way back in OS X with Quartz) when they introduced Core Graphics' point system. A point is a standard length equivalent to 1x1 pixels on a non-retina device, and 2x2 pixels on a retina device. That way, your 100x100 image will render twice the size on a retina device and basically normalize what the user sees.
First of all let me tell you the concept of ppi. ppi stands for pixels per inch, which means how many pixels are accommodated in a single inch. Higher the resolution, more are the number of pixels accommodated in a single inch For printing purpose, we use 300ppi and for creating any web related things we use 72 ppi. Like pixel, point is also a measurement unit. A single inch consists of 72 points. The unit of point is mainly used while creating Web designs. Which means while creating web designs a single point is equal to a single pixel.
From iphone5 to other higher versions the screen size is in ratio of 16:9 like 1136 x 640 or 1334 x 750 and so on, but for iphone 4 and lower versions the screen size is in ratio of 3:2. As we move from iphone5 to iphone 5s and so on to higher versions the screen size increases, but it stays in the ratio of 16:9. iphone uses retina display. In retina displays, we have concepts of 1x, 2x, 3x. So when creating any screen for iphone we usually take screen sizes in ratio of 16:9, for which 1136 x 640 is 1x. which means any images of size 10points x 10points has 10px x 10px in it. When we create the same image in 2x we accomodate 20px x 20px in the same size of 10pt x 10pt. Accordingly for 3x we have 30px x 30px fitted in size of 10pt x 10pt. This is done for sake of clarity of the image(for refrence please see the image below).
So whenever we create any screen for iphone keep in mind to have the ratio of 16:9.
