Thumbs up comments, feel useful friends can pay attention to the author public number iOS growth refers to north, continue to update

Welcome to discuss with the author, no matter the knowledge point narration is wrong or the author discusses the problem

I’m currently writing a quick tutorial on how to use Swift. This article summarizes some of the resolutions you need to know in iOS development or design, and will follow you from the start.

This is essential if your UI designer is unprofessional or does something of his own based on software such as Sketch.

Learning goals

This paper aims to solve the following problems:

  1. Distinguish between Points and Pixels
  2. How to use 1x (1x), 2x (2x) and 3x (3x) graphs and how to name files (@2x 和 @3x)
  3. How to easily develop and design at different resolutions

Point (Points)andPixels

Different iPhone models have different screen sizes and pixel densities. Pixel density is how many pixels are crammed into a physical space (usually 1 inch).

A pixel is the smallest physical element we can control on a digital display. In a given screen size, the more pixels there are, the higher the **PPI (pixels per inch) **, and the sharper the content.

Starting in 2010, Apple introduced its first phone with Retina display, which makes images sharper than ever on a physical device of the same size. The physical dimensions of the user interface have not changed but the pixel size has doubled. With the first iPhone 6 Plus, we entered the Retina HD screen era, where we needed more pixels for the same physical size.

As application developers and designers, we need to consider different screen sizes and pixel densities. In order to achieve the best display of our images at various resolutions, we need to provide multiple images of different pixels for the displayed image.

Here are two things that make layout and graphics easier for iOS developers.

  • Points: Points are resolution-independent measures. Depending on the pixel density of the screen, a point can contain multiple pixels. When we are in actual development, we use points to identify our UI rather than Pixels. We simply think of a point as a grid of 1×1, 2×2, and 3×3 pixels on phones with different screens — of course that’s not all right. This is similar to DIPS (Density Independent Pixels) on Android. This is called 1 DP, which in iOS development is known as 1 PT.
  • @2x, @3x: When you need more detailed images on different screens, you need to provide different sizes of images. And that’s where the multiplier comes in. IOS will automatically select these files when the app is running on a high-ppi iPhone.

1x, 2x and 3X image scaling

The example below illustrates an example of the same image with different pixel densities.

In iOS development, we typically only use these three magnifications for iphones with different PPI values — in fact, we rarely see devices that require a magnification anymore.

If you want to design a black dot Image, just set the UIImageView or ImageView size to 10×10 — this is not an extremely detailed design approach, the view should display different sizes for different resolutions, but this is extremely demanding.

The following table shows PPI for different iPhone devices

equipment Times the figure Points Rendered Pixels Physical Pixels Physical Device (PPI)
iPhone 12 Pro Max @3x 428 x 926 1284 x 2778 6.7 “, 458 ppi
iPhone 12,iPhone 12 Pro @3x 390 x 844 1170 x 2532 6.1 “, 458 ppi
iPhone 12 mini @3x 375 x 812 1080 x 2340 5.4 “, 476 ppi
iPhone 11 Pro Max,iPhone XS Max @3x 414 × 896 1242 x 2688 6.5 “, 458 ppi
iPhone 11, iPhone XR @2x 414 × 896 828 x 1792 6.1 “, 326 ppi
iPhone 11 Pro, iPhone X, XS @3x 375 x 812 1125 x 2436 5.8 “, 458 ppi
iPhone 6+, 6S+, 7+, 8+ @3x 414 × 736 1142 x 2208 1080 x 1920 5.8 “, 401 ppi
iPhone 6, 6S, 7, 8 @2x 375 x 667 750 x 1334 5.5 “, 326 ppi
iPhone 5, 5s, 5c, SE @2x 320 x 568 640 x 1136 4.7 “, 326 ppi
iPhone 4, 4S @2x 320 x 480 640 x 960 4.0 “, 326 ppi
iPhone 2G, 3G, 3GS @1x 320 x 480 320 x 480 3.5 “, 163 ppi
  • Points: Coordinates are specified in abstract units of Points. They only make sense in this mathematical coordinate space.
  • Rendered Pixels: Point-based graphics Rendered as Pixels. This process is called rasterization. Multiply the point coordinate by the scale factor to get the pixel coordinate. The higher the scale factor, the higher the level of detail
  • Physical Pixels: The pixel resolution of the device screen may be lower than the image rendered in the previous step. Before an image can be displayed, it must be downsampled (resized) to a lower pixel resolution
  • Physical Device: The calculated pixels are displayed on the Physical screen. PPI values tell you how many pixels there are in an inch, and thus how big pixels appear in the real world

Pay attention to

Rendered pixels and physical pixels are equal on all iOS devices, with one exception: the iPhone 6, 7, 8 Plus and Retina HD screens on the iPhone X, XS, and XS Max. Because the pixel resolution of its screen is lower than the natural @3x resolution, for regular Plus models, the rendered content is automatically resized to 87% of its original size (from 1242 x 2208 pixels to fit a display resolution of 1080 x 1920 pixels).

Another point to note is that even the same screen size varies from generation to generation:

  • IPhone 4-inch screen: 320 x 568 pt
  • IPhone 4.7-inch screen: 375 x 667 pt
  • IPhone 5.5-inch screen: 414 x 736 pt
  • IPhone 6.1-inch screen (2018-2019) & 6.5-inch screen: 414pt x 896pt
  • IPhone 5.4-inch screen (2020) & 5.8-inch screen: 375 x 812 pt
  • IPhone 6.1-inch screen (2020) : 390 x 844 pt
  • IPhone 6.7-inch screen (2020) : 428 x 926 pt

The development of actual combat

How do we deal with screen sizes and image scaling in practice?

As an iOS developer, it’s important to understand the concepts of zoom, screen resolution, pixels per inch, and @2x and @3x filename conventions. Currently, common UI tools such as Blue Lake and Sketch all have their own export zoom files.

You can also use vector files if your project allows. Xcode 12 and later supports SVG, the standard format for vector graphics such as ICONS, illustrations, and graphics.

The size of images (or UI elements) in an application’s user interface is controlled by Auto Layout (or SwiftUI). For example, with automatic layout, you can position an image relative to the edge of the screen. Of course, this is not affected by the screen PPI, as the auto-layout points are also enlarged or shrunk.

reference

The Ultimate Guide to iPhone Resolutions PaintCode)

The iOS Design Guidelines (Ivo Mynttinen)

The iOS Design Guidelines (Ivo Mynttinen)

Pixel Density, Demystified (Peter Nowell) — Keep an eye out for this author especially those using the Sketch tool

Thank you for reading this! 🚀