Problem showing real sizes on Apple device's screens (JS)

Question

I need to show real sizes of objects on screen (1mm - 20mm). At the top, I have a button "Calibrate view". I click it and a modal opens where user can calibrate view using a credit card (Put it on screen, and using + and - buttons, he adjusts the slider until the lines matches credit's height). User submit calibration. After this, for every element I run a function:

Credit card width is 85.6mm;
card__pad - is the container that has at the bottom and on top lines, that user need to match with credit's height;

function mmToPx(mm) {
    return parseFloat($('.card__pad').width()) * mm / 85.6
} 
// 20 mm show
$('.obj').css('width', mmToPx(20))

This code works perfectly on Desktop and Android (at least tested with my phone), but on Apple device, object doesn't look 20mm, but a little smaller. Tell me please what is wrong here, what need to be used for showing correct size on Apple devices??

Answer 1

A thing to keep in mind is that all iOS devices use a HiDPI screen which they call a "Retina display", meaning that there are more physical pixels there in the same space as on a standard screen.

That also means that 1px is not actually 1px because now there is the concept of pixels vs. display pixels. Because the physical pixels are so small on HiDPI making something with a border: 1px solid red would be too small and not what the developer intended, that 1px size actually displays on multiple physical pixels to achieve the same look. Some Android devices also use a higher pixel density, but maybe the ones you tested on didn't use that?

This SO question might be worth looking into, but first make sure that you are using this meta tag:

<meta name="viewport" content="width=device-width"/>

You can use window.devicePixelRatio to get... well the device pixel ratio. You may want to plug this in to your function and see what it returns on various devices. I'm currently on a Windows machine with a 24" Dell monitor and it returns 0.8999999761581421 for me.

I know this isn't a total answer for your code since I can't really test on multiple devices right now, but I hope this can point you in the right direction.