问题描述:通过rem计算的宽度和手机上实际显示的宽度不一致,改用px跟预想一致。
导致原因:部分安卓手机或者webview调整了系统默认字体大小。此时在html根节点上设置的20px已经不是20px了,导致计算rem宽度出错。
解决办法:
1、计算实际字号:
var actualSize = parseFloat(window.getComputedStyle(document.documentElement)["font-size"]);
2、计算缩放比例:
var scale = actualSize / rem; //rem为原本设置的根节点字号
3、为保持页面其它元素不受影响,直接缩放rem:
var remScaled = rem / scale;
完整代码:
;(function(win) {
var docEl = win.document.documentElement,
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
var rem = width / 750*100;//以750px为原稿,除以100可得各元素的rem
docEl.style.fontSize = rem + "px";
var actualSize = parseFloat(window.getComputedStyle(docEl)["font-size"]);
if (actualSize !== rem) {
var remScaled = rem / ( actualSize / rem );
docEl.style.fontSize = remScaled + "px"
}
}
function dbcRefresh() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 100)
}
win.addEventListener("resize", function() { dbcRefresh() }, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { dbcRefresh() }
}, false);
refreshRem();
})(window);