androidiosflutterscreenscreen-size

Different Mobile Screen Resolution

I use Xiaomi's Redmi Note 9 Pro. The screen resolution of my phone is 1080x2400. But when I print the size of my phone's height and width using Dart and Flutter, I get 393x857.

I'm trying to find the corelation between the two. But not able to.

Also for iPhoneX the actual resolution is 1125x2436 but using the chrome dev tools I found out it's 375x812.

I have read several articles on ppi, aspect ratio and other similar stuff and finally I'm putting it here to learn their corelation.

Please tell me for any given pixel, 1125x2436 how to derive 375x812?

Solution

  • Through some research and learning, I've managed to uncover the correlation between these two sets of numbers, and I'd like to share my understanding here.

    1. Physical Pixels vs. Logical Pixels:

      • Physical Pixels: These are the actual dots that make up the screen's display. For instance, a device might be advertised as having a resolution of 1125x2436 physical pixels.
      • Logical Pixels: These are the units developers work with for layout and design. They take into account the pixel density of the device, ensuring a consistent experience.

    2. Device Pixel Ratio (DPR):

      • The DPR is a crucial concept here. It's the ratio between physical pixels and logical pixels. It defines how many logical pixels correspond to one physical pixel.
      • Consider the iPhone X with a typical DPR of 3.0. This means that for every 3 logical pixels, there's 1 physical pixel.

    Calculating Logical Resolution from Physical Resolution

    To bridge the gap between the two types of pixels, I've found that I can derive the logical resolution from the physical resolution using the device's DPR:

    1. Dividing Physical Resolution by DPR:
      • Logical Width = Physical Width / DPR
      • Logical Height = Physical Height / DPR

    For instance, let's take the iPhone X with a physical resolution of 1125x2436 and a DPR of 3.0:

    Logical Resolution:

    By applying this calculation, I can understand why my layout tools might display 375x812 for my iPhone X.