DEV Community

Khoa Pham
Khoa Pham

Posted on

3 2

Pixel and point

TL;DR: Don't use nativeScale and nativeBounds, unless you're doing some very low level stuff

What is point and pixel

From https://developer.apple.com/library/content/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/GraphicsDrawingOverview/GraphicsDrawingOverview.html

In iOS there is a distinction between the coordinates you specify in your drawing code and the pixels of the underlying device

The purpose of using points (and the logical coordinate system) is to provide a consistent size of output that is device independent. For most purposes, the actual size of a point is irrelevant. The goal of points is to provide a relatively consistent scale that you can use in your code to specify the size and position of views and rendered content

On a standard-resolution screen, the scale factor is typically 1.0. On a high-resolution screen, the scale factor is typically 2.0

How about scale and nativeScale

From https://developer.apple.com/documentation/uikit/uiscreen

  • var bounds: CGRect: The bounding rectangle of the screen, measured in points.
  • var nativeBounds: CGRect: The bounding rectangle of the physical screen, measured in pixels.
  • var scale: CGFloat: The natural scale factor associated with the screen.
  • var nativeScale: CGFloat: The native scale factor for the physical screen.

The scale factor and display mode

See this for a whole list of devices and their scale factors https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

The iPhone 6 and 6+ introduced display mode https://www.cnet.com/how-to/explaining-display-zoom-on-iphone-6-and-6-plus/

You can see that currently the iPhone 6+, 6s+, 7+ phones have scale factor of 2.88 in zoomed mode, and 2.6 in standard mode

You can also see that in zoomed mode, iPhone 6 has the same logical size as the iPhone 5

Simulator vs device

This is to show you the differences in nativeScale in simulators and devices in zoomed mode, hence differences in nativeBounds.

iPhone 6+ simulator

(lldb) po UIScreen.main.scale
3.0

(lldb) po UIScreen.main.bounds
 (0.0, 0.0, 414.0, 736.0)
   origin : (0.0, 0.0)
    - x : 0.0
    - y : 0.0
   size : (414.0, 736.0)
    - width : 414.0
    - height : 736.0

(lldb) po UIScreen.main.nativeScale
3.0

(lldb) po UIScreen.main.nativeBounds
 (0.0, 0.0, 1242.0, 2208.0)
   origin : (0.0, 0.0)
    - x : 0.0
    - y : 0.0
   size : (1242.0, 2208.0)
    - width : 1242.0
    - height : 2208.0
Enter fullscreen mode Exit fullscreen mode

iPhone 6+ device

(lldb) po UIScreen.main.scale
3.0

(lldb) po UIScreen.main.bounds
 (0.0, 0.0, 375.0, 667.0)
   origin : (0.0, 0.0)
    - x : 0.0
    - y : 0.0
   size : (375.0, 667.0)
    - width : 375.0
    - height : 667.0

(lldb) po UIScreen.main.nativeScale
2.88

(lldb) po UIScreen.main.nativeBounds
 (0.0, 0.0, 1080.0, 1920.0)
   origin : (0.0, 0.0)
    - x : 0.0
    - y : 0.0
   size : (1080.0, 1920.0)
    - width : 1080.0
    - height : 1920.0
Enter fullscreen mode Exit fullscreen mode

Sentry mobile image

Mobile Vitals: A first step to Faster Apps

Slow startup times, UI hangs, and frozen frames frustrate users—but they’re also fixable. Mobile Vitals help you measure and understand these performance issues so you can optimize your app’s speed and responsiveness. Learn how to use them to reduce friction and improve user experience.

Read the guide →

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs