取這樣的標(biāo)題可能會被打，可是我確實順帶解決了淘寶flexible.js的問題。
??———————7.14更新 start—————————
??確實被打臉了，產(chǎn)生這種情況是因為安卓部分webview修改了默認字體，導(dǎo)致1rem和html.fontSize不一致。想當(dāng)然以為根據(jù)屏幕寬度設(shè)置html的字體，會和默認字體無關(guān)。最后代碼貼的代碼還是有效的。祝好！
??———————7.14更新 end—————————
??先聲明兩個變量供下文使用：
//html style font-size
docElementFontSize = document.documentElement.style.fontSize;
//html 最終的 font-size
finalDocElementFontSize = window.getComputedStyle(window.document.documentElement).getPropertyValue("font-size")
rem是根據(jù)html的最終font-size進行響應(yīng)： 1rem === finalDocElementFontSize（重點?。?。對于大部分機型，docElementFontSize和finalDocElementFontSize是相等的，但是有些網(wǎng)頁在某些情況下打開的話，會得到docElementFontSize和finalDocElementFontSize不相等的情況，比如我公司的小米Max和榮耀8機型，在市場上算是比較新的機型，測試數(shù)據(jù)都是在QQ上演示，公司的土豪APP也會有這種情況。如下圖：
??這是在小米Max的QQ開的測試頁面 ，大佬可以扒網(wǎng)頁看js，屏幕寬度是393px，html的style.fontSize是39.3px(頁面寬度分成10等分)，然而html最終fontSize是45.195px！?。∠旅嬖O(shè)置一個灰色的box，高度是1rem，得到的樣式高度是45.1875px?。?！看到這很毀三觀有木有。我在百度和谷歌沒有查到關(guān)于這個的任何問題和資料。眾所周知淘寶玩rem玩的飛起，用QQ打開m.taobao.com如下圖：
淘寶在body寫了overflow:hidden;width:100%;所以頁面寬度超出部分隱藏了，再結(jié)合我測試的第一張圖，頁面寬度是393px,1rem=45.1875px，那10rem就超出了頁面寬度。事實確實如此，如果設(shè)置頁面寬度10rem，頁面會出現(xiàn)橫向滾動條。
??解決方法也很簡單，因為這類異常手機html的style.fontSize、html最終的fontSize和頁面元素1rem的值都不相等，但是1rem和html的最終fontSize很接近。代碼如下
/*
* 適用于獲取屏幕寬度等分設(shè)置html的font-size情況，比如 flexible.js庫
*/
//計算最終html font-size
function modifileRootRem () {
var root = window.document.documentElement;
var fontSize = parseFloat(root.style.fontSize);
var finalFontSize = parseFloat(window.getComputedStyle(root).getPropertyValue("font-size"));
if(finalFontSize === fontSize) return;
root.style.fontSize = fontSize+(fontSize-finalFontSize) + "px";
}
if(typeof window.onload === 'function'){
var oldFun = window.onload;
window.onload = function(){
oldFun();
modifileRootRem();
}
}else{
window.onload = modifileRootRem;
}
通過docElementFontSize+(docElementFontSize - finalDocElementFontSize) 得到html.fontSize的值。適用這類特異機型的html.fontSize!
這個問題我特意問了下大漠老師，大佬只是說進行“特定”處理，看淘寶首頁的情況也沒做好很好的兼容，不出意外，我這是針對這類機型rem布局兼容的首創(chuàng)代碼！
如有疑問歡迎評論討論
