0

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??

enter image description here

lewandowsky91515
  • 25
  • 4
  • I assume this will only work when you also do the calibration on an iOS device. The pixels-per-inch can be different depending on each particular device. – Kokodoko May 12 '23 at 12:16
  • Yes, user first put his credit card on screen to calibrate view. Once card's container matches, he press calibrate and all objects will be resized. I think it is somehow connected with window.devicepixelratio, but I dont have an apple device to live test results – lewandowsky91515 May 12 '23 at 12:20
  • Just out of interest, did you try to use `mm` units in CSS directly? Because this should use the correct pixel-to-device ratio automatically. – Kokodoko May 12 '23 at 12:28
  • Yes, works only on desktop. On android and Apple devices looks like 40%-75% of real mm. This method with card works on desktop and android, but I dont know why it doesnt work on Apple. – lewandowsky91515 May 12 '23 at 12:39
  • Can you show us the code you use for setting up the height reading? What function are you using to find the position of the lines? – A Haworth May 12 '23 at 15:59

1 Answers1

0

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.

Chris Barr
  • 29,851
  • 23
  • 95
  • 135