Масштабирование значения размера шрифта с масштабированием браузера

Question

Я нашел проблему, которая вызывает у меня некоторую путаницу. У меня есть размер шрифта, установленный в моем файле CSS с масштабированием rem, а базовый размер шрифта 16px установлен в блоке html{ ... } в файле CSS.

Моего выпуск

При масштабировании браузера с помощью браузеров собственного метода увеличения (Firefox V46 в этом случае. Кроме того, я сделал это с Chrome V51) текстом на изменениях сайта размера просто отлично, однако, различные дополнения и несколько других элементов имеют шкалы, относящиеся к размеру шрифта, значение rem, но при просмотре вычисленного и исходного кода с помощью Firebug (и с помощью инспектора Chrome) не отображает вычисляемое изменение с учетом изменения этих значений в px , даже при увеличении.

Например:

CSS:

html,body { 
    font-size: 16px; /*the base.*/ 
} 

nav { 
    font-size: 0.75rem; /* should be 12px */ 
} 

.textBlock { 
    font-size: 0.95rem; /* should be 15.2px */ 
    padding: 0 0.15rem; /* should be 2.4px */ 
} 

Теперь, когда я загрузить страницу на 100% увеличении, все показывает в масштабе и все вычисленные значения, как комментировал. Но если я увеличиваю масштаб, например до 120%, все текстовые на странице пропорционально увеличиваются в размере (в то время как элементы, не связанные с шрифтом, остаются неизменными), но затем, читая источник страницы с помощью firebug, он все еще говорит мне что:

вид код:

html, body { 
    font-size: 16px; 
} 
.textBlock { 
    font-size: 0.95rem; 
    padding: 0 0.15rem; 
} 

компьютерной результаты

font-size: 15.2px (in textBlock). 
padding: 2.4px (in textBlock). 

Я хочу иметь возможность просматривать вычисленный размер элементов на странице с учетом значения масштабирования.

Я был под впечатлением, что путь изменения масштаба браузера, что изменил body (или html) элемент базового размера шрифта, так что 1rem Вычисленного значение изменяется от 16px к 17.5px (к примеру), и что из-за этого все связанные дочерние элементы будут масштабироваться соответствующим образом.

Шрифты do масштаб, но я как пользователь браузера. Я не получаю никакой обратной связи с текущим размером вывода элементов на основе шрифта.

Дальнейшее тестирование

• Использование JavaScript (from this answer) также говорит мне размер шрифта 16px в основном корпусе, независимо от масштаба.

• Удаление body Размер шрифта ничего не меняет.

• Установка размера шрифта базы body до значения rem/em также не меняет обратную связь, данное Firebug, Javascript или Chrome инспектора.

Почему я не читал другие вопросы, размер шрифта на StackOverflow

• Все остальные (и есть немало) шрифтов размером вопросы, которые я нашел относятся к людям, ставящим статическими значениями, такими как 14px, как их размеры элементов и ожидающие их масштабирования.

• Я не могу найти полезной литературы (с 2008/09 г.) о том, как браузеры действительно работают с механизмом масштабирования и как разработчики могут работать с этим инструментом.

Что я пытаюсь достичь/найти

Я хочу, чтобы иметь возможность просматривать веб-страницы на любом уровне браузера масштабирования и быть в состоянии обнаружить и получить обратную связь говоря мне размер шрифта -размер значение на различных элементов, таких как:

Zoom 120% on .textBlock [computed] { 
    font-size: 18.24px; /* (16px * 1.20) * 0.95 */ 
    padding-left: 2.88px; /* (16px * 1.20) * 0.15 */ 
    padding-right: 2.88px; /* (16px * 1.20) * 0.15 */ 
} 

Это более важно в моем случае для измерения, как Прокладки они также часто rem основе в моей ситуации (я нахожу, что некоторые элементы переполнены из-за для увеличения браузера не 100%). Но независимо от моих собственных требований, я очень удивлен, что я не могу найти вычислимые ценности, которые, как я считаю, были бы очень необходимыми. Я хочу это исправить (и, честно говоря, я могу исправить свой собственный CSS достаточно легко, но я хотел получить обратную связь от чтения того, что вычисленный размер шрифта, после масштабирования, но нашел проблему, которую я публикую здесь).

В принципе, я хочу, чтобы иметь возможность получить обратную связь количественной вычисленных значений CSS с веба-сайта на основе браузера зумирования значения, в rem скаляре.

Есть ли какие-либо решения?

Answer 1

Прежде всего, rem unit is related to the root element, т.е. html, таким образом, изменяя font-size на body не оказывает никакого влияния на элементах-потомках.

Firebug и другие инструменты разработчика отображают вычисленные значения в соответствии со спецификацией W3C. Точнее, они используют функцию window.getComputedStyle() для получения вычисленного значения, и эта функция не учитывает уровень масштабирования.

Чтобы получить фактический размер шрифта, вам необходимо рассчитать его самостоятельно. Как вы это делаете, described by Tom Bigelajzen. Он также создал script to detect the zoom level.

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

var cs = window.getComputedStyle(element); 
var actualSize = Number.parseFloat(cs.fontSize) * detectZoom.zoom();