В моем HTML у меня есть <div> (назовите это панель) с фиксированной шириной, которая содержит некоторый текст; этот текст установлен в font-size: 25px; line-height: 25px; в сопроводительном CSS. Так получилось, что текст заканчивается как 36 строк.
Учитывая, что все поля, прокладки и границы равны нулю, вы ожидаете, что высота панели будет 36 * 25px = 900px, и это на самом деле то, что я нахожу в Firefox, используя метод DOM getBoundingClientRect().
Однако в Google Chrome я получаю разные цифры; казалось бы, что панель только 892.7999877929688px высока, а линии - 24.799999660915798px. Однако разделение этих двух чисел дает 36. Похоже, что существует коэффициент масштабирования между номинальными пикселями, установленными в CSS и реальными пикселями, как указано getBoundingClientRect(); в моем случае это 1,0080645299120465 номинальных для реальных пикселей.
Еще одно доказательство приходит от Chromium, работающего внутри приложения nwjs, где я первоначально наблюдал несоответствие. Во время моих тестов он всегда отличался от показателя в Chrome. Теперь, в какой-то момент во время моих тестов, пиксели, сообщенные Chromium, внезапно подскочили до целочисленных значений, как указано в Firefox; Я не уверен, что сделал, чтобы это произошло.
Можно было ожидать, что дробные отношения каким-то образом связаны с увеличением страницы; в конце концов, при очень небольших размерах Chrome и Chromium обрабатывают текст (а иногда и ошибаются). И действительно, изменение масштаба в Chrome приводит к разным коэффициентам, а увеличение масштаба Chrome до максимума сделает соотношение равным 1. В моем приложении Chromium не увеличено до максимума, и все еще имеет дробный отношение. отношение целочисленных пикселей в тесте, но дробное значение в реальном приложении.
Для всех, о которых я сейчас знаю, все, что я могу сделать, чтобы получить соотношение, поэтому я могу сделать звук, согласованное измерение размера коробки с помощью JavaScript - это установить коробку с известным размером и измерить ее.
Мне все еще интересно, каков источник наблюдаемого поведения. Есть ли какие-либо сообщения об этом? Является ли это преднамеренным или возникающим поведением рендеринга? Это когда-либо обсуждалось разработчиками? Существует ли API для получения отношения?
Я поставил код в стиле https://gist.github.com/loveencounterflow/d8c20b9021d2ab3f573a, чтобы упростить тестирование.