原標題：淘寶flexible.js漏洞修補
取這樣的標題可能會被打，可是我確實順帶解決了淘寶flexible.js的問題。
先宣告兩個變數供下文使用：
|
1 2 3 4 5 |
//html style font-size docElementFontSize = document.documentElement.style.fontSize; //html 最終的 font-size finalDocElementFontSize = window.getComputedStyle(window.document.documentElement).getPropertyValue("font-size") |
rem是根據html的最終font-size進行響應： 1rem === finalDocElementFontSize（重點！） 。對於大部分機型，docElementFontSize和finalDocElementFontSize是相等的，但是有些網頁在某些情況下開啟的話，會得到docElementFontSize和finalDocElementFontSize不相等的情況，比如我公司的小米Max和榮耀8機型，在市場上算是比較新的機型，測試資料都是在QQ上演示，公司的土豪APP也會有這種情況。如下圖：
這是在小米Max的QQ開的測試頁面 ，大佬可以扒網頁看js，螢幕寬度是393px，html的style.fontSize是39.3px(頁面寬度分成10等分)，然而html最終fontSize是45.195px！！！下面設定一個灰色的box，高度是1rem，得到的樣式高度是45.1875px！！！看到這很毀三觀有木有。我在百度和谷歌沒有查到關於這個的任何問題和資料。眾所周知淘寶玩rem玩的飛起，用QQ開啟m.taobao.com如下圖：
淘寶在body寫了overflow:hidden;width:100%;所以頁面寬度超出部分隱藏了，再結合我測試的第一張圖，頁面寬度是393px,1rem=45.1875px，那10rem就超出了頁面寬度。事實確實如此，如果設定頁面寬度10rem，頁面會出現橫向滾動條。
解決方法也很簡單，因為這類異常手機html的style.fontSize、html最終的fontSize和頁面元素1rem的值都不相等，但是1rem和html的最終fontSize很接近。程式碼如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/* * 適用於獲取螢幕寬度等分設定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佈局相容的首創程式碼！
如有疑問歡迎評論討論