解决某些型号手机在使用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可得各元素的remdocEl.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);