两个安卓机A
和B
屏幕宽度都是360px
,
html
的font-size
都是36px
某个元素设置width: 2.64rem
,
.item {
width: 2.64rem
}
分别获取这个元素的宽度
alert($('.item').width())
最终A弹出的是95.0312px
,B弹出的却是83.625px
这是为啥?
自问自答了,这是问题也是答案。
相对长度单位,相对于根元素(即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'