Ошибка с наследством размера шрифта ⇐ Javascript

[Anonymous]

Что я делаю не так? Могу ли я решить эту проблему с разницей в размерах шрифта? Я понимаю, что динамическое изменение тега Viewport не является хорошей идеей. Но очень интересно, почему два простых дивиации имеют два разных размера, унаследованные от одного и того же родительского элемента тела. < /P>
Примечание. Этот пример работает нормально в браузерах настольных компьютеров, ошибка повторяется только в мобильных браузерах (хром, яндекс и т. Д.). src = "https://i.sstatic.net/65pktubm.png"/>




Lomaste.RU - simple viewport test



@charset "utf-8";
div {margin: 20px;}
#longText {color: darkred;}
#shortText {color: darkgreen; white-space: nowrap;}
#redBox {width: 500px; height: 200px; font-size: 10px; color: white; background-color: red;}
.textSize {border: 1px solid;}


let newFont = 9;
let textSize = false;
let longText = false;
let shortText = false;
window.addEventListener('DOMContentLoaded', function() {
// viewport attributes calculating
const dpRatio = window.devicePixelRatio;
const bodyWidth = Math.round(document.documentElement.getBoundingClientRect().width * dpRatio);
const initScale = Math.round(1000000 / dpRatio) / 1000000;
// replace viewport tag
const docHead = document.head;
const oldTag = document.querySelector('meta[name="viewport"]');
const newTag = document.createElement('meta');
newTag.setAttribute('name', 'viewport');
newTag.setAttribute('content', 'width=' + bodyWidth + ', initial-scale=' + initScale);
docHead.removeChild(oldTag);
docHead.appendChild(newTag);
// apply new page width
document.body.style.width = bodyWidth + 'px';
// getting handles
textSize = document.getElementsByClassName('textSize');
longText = document.getElementById('longText');
shortText = document.getElementById('shortText');
// add font size changing cycle
setInterval(function() {
newFont = newFont + 1;
if (newFont > 100) {
newFont = 10;
}
// apply new font to whole page
document.body.style.fontSize = newFont + 'px';
// show real font sizes
textSize[0].innerHTML = window.getComputedStyle(longText).fontSize;
textSize[1].innerHTML = window.getComputedStyle(shortText).fontSize;
}, 1000);
});




This long string should use inherited font size from Body, but real font size is bigger then Body have. This difference becomes very noticeable when the font size goes from 12px to 13px (instant jump). As the font size increases further to 80px, the difference becomes less obvious (smooth, no jump). After 80px to 100px both sizes are stable and correct.

Correct inherited font size

500 * 200 px

Make screenshot after zoom out on your mobile device and check my size






Подробнее здесь: https://stackoverflow.com/questions/796 ... nheritance