How to find physical size of UI element?

Question

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).

iPadOS
Swift

2.7k

Posted by

lj000

Reply

Add a Comment

Answer 1

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:

Screen sizes 2021-08-30 à 13.07.45.png

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.

Posted by

Claude31

Just What I was looking for, thanks heaps. I will find a way to identify the current device model and hard code the related screen values to pull from. I am only working with Ipad's so found it easier to calculate using PPI.

—
lj000
Just What I was looking for, thanks heaps. I will find a way to identify the current device model and hard code the related screen values to pull from. I am only working with Ipad's so found it easier to calculate using PPI.

—
lj000

Add a Comment

Answer 2

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.

Posted by

Claude31

Thanks for the input, but this hasn’t help me find what I’m after.

I don’t need the percentage of the screen an element is taking up, or the size of the screen in pixels but I need the screen size in (millimetre, centimetre, inch etc.), and I wasn’t able to work this out from your answer because it doesn’t help me find how many pixels are in 1 centimetre.

—
lj000

Add a Comment

Answer 3

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:

Screen sizes 2021-08-30 à 13.07.45.png

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.

Posted by

Claude31

Just What I was looking for, thanks heaps. I will find a way to identify the current device model and hard code the related screen values to pull from. I am only working with Ipad's so found it easier to calculate using PPI.

—
lj000
Just What I was looking for, thanks heaps. I will find a way to identify the current device model and hard code the related screen values to pull from. I am only working with Ipad's so found it easier to calculate using PPI.

—
lj000

Add a Comment

Answer 4

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

Posted by

Claude31

Add a Comment

How to find physical size of UI element?

Accepted Reply

Replies