自问自答了,这是问题也是答案。
相对长度单位,相对于根元素(即html元素)font-size
计算值的倍数
计算值,也就是说设置了font-size: 36px
,但计算后单个后文字的宽度不一定是36px
,
在部分机型中会有误差,我这里设置36px
,得到的却是31px
,因此产生了这个问题。
解决方案:
1.首次设置到font-size
后,计算真实宽度
function getTrueFontSize(){
var d = window.document.createElement('div');
d.style.width = '1rem';
d.style.display = "none";
var head = window.document.getElementsByTagName('head')[0];
head.appendChild(d);
var trueFontSize = parseFloat(window.getComputedStyle(d,null).getPropertyValue('width'));
return trueFontSize
}
2.更新font-size
值
//fontSize为第一次计算的font-size值
fontSize = fontSize * fontSize / getTrueFontSize();
docEl.style.fontSize = fontSize + 'px'
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…