How to find physical size of UI element?

I am trying to find a way to set a UI element to a physical size (in the real world) across all devices.

For example: in pages on Ipad, when you zoom in / out you see a % scale, and at 100% it says "Actual" because the page onscreen is the same width as a real piece of paper. I would like to set my scroll view / PKCanvas view to the size of a real piece of (a4) paper but have not found a way to achieve this aside from hard coding values.

Constraints are sized using points so I expect to need some conversion scale, unique to each device (eg. how many points = 1cm).

Answered by Claude31 in 686321022

You have to do some computation.

Here is a table which gives all devices size information. h t t p s : / / w w w.ios-resolution.com

Let's consider an example:

From screen physical Diagonal (phD), you can compute physical width (phW) and height (phH):

  • we have equation :

phW*phW + phH * phH = phD * phD. // Pythagore

  • physical dimensions are proportional to logical dimensions

phW = logW * x phH = logH * x

  • Hence we get :

x = phD / sqrt(logW*logW + logH * logH)

phW = phD / sqrt()

physWidth = x * logicalWidth

Now that you have physical height and width of screen, as well as logical dimensions, it is easy to compute physical size of UI element:

  • if it is h and w (in points)

itemPhyWidth = w * physWidth / logicalWidth,

  • or with previous formulae

itemPhyWidth = w * x

itemPhyHeight h * x

Hope that helps.

You can get the real screen size (in points or pixels):

https://stackoverflow.com/questions/4779221/in-iphone-app-how-to-detect-the-screen-resolution-of-the-device

And knowing the screen resolution (in points or pixels), you know the physical pixel / point size.

Then knowing the size of elements, you know the fraction of screen it is. Hence you can compute its physical size.

Or adjust the size (in points) of UI element as needed.

Accepted Answer

You have to do some computation.

Here is a table which gives all devices size information. h t t p s : / / w w w.ios-resolution.com

Let's consider an example:

From screen physical Diagonal (phD), you can compute physical width (phW) and height (phH):

  • we have equation :

phW*phW + phH * phH = phD * phD. // Pythagore

  • physical dimensions are proportional to logical dimensions

phW = logW * x phH = logH * x

  • Hence we get :

x = phD / sqrt(logW*logW + logH * logH)

phW = phD / sqrt()

physWidth = x * logicalWidth

Now that you have physical height and width of screen, as well as logical dimensions, it is easy to compute physical size of UI element:

  • if it is h and w (in points)

itemPhyWidth = w * physWidth / logicalWidth,

  • or with previous formulae

itemPhyWidth = w * x

itemPhyHeight h * x

Hope that helps.

Some computation on an example, on iPhone 12, a label with 34 points height:

x = 6.06 / √(390390 * 844844) = 0.0065" = 0.0165 cm

h = 34 * x = 0.56 cm

How to find physical size of UI element?
 
 
Q