Как получить точный размер блока до тысячных пикселя?

Question

[GetQuestion]

Здравствуйте. Делема. Есть некое веб-приложение, где требуется получать значения вплоть до тысячных пикселя, связано с тем, что один пиксель это несколько миллиметров в веб приложении, тут рассказывать долго, суть вопроса - написал.

Делема в том, что я получаю не то значение, которое установлено у блока, например есть блок:
<div class="block" style="height:81.643px"></div>
Пытаюсь получить точное значение height:

$(function() {
	console.log($('.block')[0].getBoundingClientRect().height);
})

Результат не 81.643 как должно быть, а 81.640625 (если сделаем float + tofixed, то выйдет 81.641). Но у меня в приложении даже 2 тысячных - должно учитываться. И это лишь простой пример, приложение на несколько тысяч строк где подобное встречается не один десяток раз.

Подскажите верный метод.

Comments

[Антон Антон]

Переходить на svg с её собственной внутренней независимой системой координат не предлагать?

[GetQuestion]

Антон Антон, Приложение на javascript / jquery, svg тут не при делах (не реализовать нужные элементы на нем).

[Антон Антон]

GetQuestion, в смысле не реализовать?
илнайн svg можно js'ом крутить как угодно. а с использованием реактивных фреймворков типа vue это ещё более удобно.

[GetQuestion]

Антон Антон, Не вариант использовать svg из-за особенности приложения, вопрос исключительно по javascript / jquery / html

[Антон Антон]

GetQuestion, ну вот браузер на этом устройстве решил сделать так. на другом устройстве он решит сделать по другому. ну и другой браузер на этом же устройстве тоже сделает по другому. теперь вам остается только жить с этим.
Скажите спасибо, что до целых не округлил.

[GetQuestion]

Антон Антон, интересует только хром). По этому я и задаю вопрос тут, на портале, который рассчитан именно для этого :) Я понял о чем вы говорите, и если бы я писал приложение с 0, само собой возможно так и сделал бы. Вопрос актуален.

[rPman]

в разных браузерах на разных машинах результат разный, у меня к примеру 81.64999389648438
полагаю это результат многократного преобразования в/из внутренних координат в браузере (как только браузеры стали корректно поддерживать масштабирование ОС так полагаю это ввели)

p.s. желание у тебя странное, объясни конечную цель, зачем тебе нужно точное значение float величины (что в принципе не возможно правда в данном случае погрешность все же велика)

[GetQuestion]

rPman, Как я и написал в вопросе, имеется визуализация веб приложения где используются миллиметры, при этом 1 пиксель это несколько миллиметров (и все это дело динамически изменяется зависимо от размеров страницы, блока, адаптивности и т.д.). Сложная система.

Но похоже выход только один. Получать значение через регулярку и переводить в float

[Сергей delphinpro]

Хрень какая-то.
Всё равно монитор не сможет закрасить половину пикселя.

[GetQuestion]

Сергей delphinpro, Закрашивать и не требуется, вопрос не в этом.

[rPman]

GetQuestion, тогда речь не о визуализации!
визуализация это то что ты видишь, ты никак не увидишь тысячную пиксела, если десятые пиксела еще можно полутонами изобразить, то меньше никак

и еще раз повторю, float по техническим причинам не может гарантировать что значение помещенное в него из десятичного представления будет равно значению прочитанному, твоя задача изначально содержит этот изъян

[shurshur]

GetQuestion, до кучи ещё отмечу, что некоторые мошенники используют размеры фактических элементов для получения отпечатка пользователя и его деанонимизации, поэтому браузеры могут выдавать величины с намеренно сниженной точностью или рандомизировать разницу. Вроде были новости когда-то что это для canvas делали, но я не уверен, что это не делается и для другуих видов элементов.

В общем-то это бессмысленная затея сама по себе, так как нарисовать даже десятые доли пикселя можно только весьма условно через очень хитрые манипуляции с цветом, а тысячные совсем без шансов.

[RAX7]

GetQuestion,

один пиксель это несколько миллиметров в веб приложении

Это как так вышло?

[AUser0]

RAX7,

один пиксель это несколько миллиметров в веб приложении

Это как так вышло?

Такие вопросы в этой теме - табу, стирают...

Answer 1

[EvolveSunVolt]

Возможно, точность измерения зависит от разрешения экрана и не может быть точнее определенного значения. Однако, есть несколько вариантов, которые можно попробовать:

1. Использовать свойство getComputedStyle, которое вернет вычисленное значение CSS свойства. Например:

$(function() {
  console.log(window.getComputedStyle($('.block')[0]).getPropertyValue('height'));
})

1. Установить размер блока с помощью CSS переменных и получить его значение через свойство getComputedStyle. Например:

<div class="block" style="--height: 81.643px;"></div>

.block {
  height: var(--height);
}

$(function() {
  console.log(window.getComputedStyle($('.block')[0]).getPropertyValue('--height'));
})

Этот подход позволяет задавать размеры блока с большей точностью, используя переменные CSS.

1. Использовать единицы измерения, позволяющие более точное определение размеров, например, rem или em.

Например, если размер шрифта установлен на 16px, то 0.001rem будет соответствовать 0.01px:
<div class="block" style="height:0.001rem"></div>

$(function() {
  console.log($('.block')[0].getBoundingClientRect().height);
})

Но следует учитывать, что использование таких единиц измерения может привести к проблемам с масштабированием и адаптивностью.