rem布局在部分手机上显示不正常问题

2019独角兽企业重金招聘Python工程师标准>>>

问题描述：通过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可得各元素的remdocEl.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);

 

转载于:https://my.oschina.net/u/879103/blog/1785521

总结

以上是生活随笔为你收集整理的rem布局在部分手机上显示不正常问题的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。