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布局在部分手机上显示不正常问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。