Em minha aplicação (com React), preciso que a figura apresentada seja equivalente às medidas do mundo real (cm / mm) em todos os aparelhos.
O meu problema é: se defino o diâmetro de um circulo como 3 centímetros, em vários dispositivos ele terá na verdade 2.5cm. Ou ainda, em outros, 3.5cm... A medida nunca é exata. E o mesmo acontece se deixo a medida em pixels, ela também sofre variação em diferentes dispositivos.
Minha solução eficaz, porém trabalhosa foi: Criei uma rota para que o usuário faça a 'calibragem' antes de chegar na tela em que precisará das medidas exatas. Nesta etapa o usuário precisa colocar um cartão bancário sobre a tela do aparelho e, através de um input range, ele deve ajustar a altura da imagem até fique igual a altura do cartão. clique aqui para ver uma imagem ilustrativa deste processo.
Me aproveitando da regra universal de que todos os cartões bancários possuem a altura de 5.4cm, consigo assim definir quantos pixels equivalem à um centímetro na tela daquele usuário e, com isto, prosseguir com a finalidade da minha aplicação.
O que eu preciso: A etapa de calibragem pode parecer muito trabalhosa ao usuário, fazendo- desistir do uso da aplicação. Por conta disto, preciso descobrir uma maneira de fazer essa etapa de calibragem de forma automática. Ou então, conseguir estabelecer um tamanho físico exato para a minha imagem, de forma que possua a mesma medida em todos os aparelhos em que for vista (tanto desktop quanto mobile).