解决某些型号手机在使用rem单位时,内容超出屏幕宽度问题
在H5手机页面上,用rem单位布局,配合js计算出一个根节点的font-size(原理是屏幕宽度乘以一个固定比例,如1/100),之后页面中所有的px全都换算成了rem单位来写,优点是能适配各种不同屏幕尺寸的手机。
但是 有些手机上rem单位计算不准! 计算后的值比正确值大。导致页面变形
解决办法
(function(win) {
var docEl = win.document.documentElement,
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
console.log("输出")
console.log(width)
var rem = width / 750 * 100; //以750px为原稿,除以100可得各元素的rem
docEl.style.fontSize = rem + "px";
var actualSize = parseFloat(window.getComputedStyle(docEl)["font-size"]);
console.log("获取")
console.log(actualSize)
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);