華為mate10 pro內置瀏覽器出現的令人頭疼的樣式兼容問題

 

　　問題描述：

　  下圖紅色框區域內容在華為mate10 pro（以下簡稱mate10）內置瀏覽器中整體向左偏移，沒有居中，其它手機瀏覽器都無該問題，如下圖

　　

　　

 

　　問題分析

　  經過一番追根溯源，我發現是 box-sizing: border-box;屬性影響到了，該屬性是讓元素使用css盒子模型的怪異模式，

　  簡單來說不會把border和padding算入元素寬度中；而css盒子模型標准模式： box-sizing: content-box; 

　  則會把border和paading算到元素的寬度中，從而使元素總寬度增加

 

　  若把box-sizing: border-box;直接改為box-sizing: content-box;后華為mate10內置瀏覽器是沒問題了，

　  但其它原本沒有該問題的手機都會出現上圖紅色框內容整體向左偏移的問題，這讓我陷入了兩難

 

　 解決方案

　  首先從華為mate10設置中找到內置瀏覽器UA信息

　　

 　　接着使用正則表達式對它進行識別，若檢測到是華為手機，則使用js單獨為其添加box-sizing: content-box;屬性 ，從而解決該問題

 

　　關鍵代碼

　　　　function cssFixForHuawei() {
                var ua = navigator.userAgent,
                    rechargeBgEle = document.getElementsByClassName("recharge-bg")[0],
                    rechargeListContentEle = document.getElementsByClassName("recharge-list-content")[0];
                if (true === /huawei/ig.test(ua) ) {
                    rechargeBgEle.style.width = "3.7rem";
                    rechargeBgEle.style.boxSizing = "content-box";
                    rechargeListContentEle.style.boxSizing = "content-box";
                }
            }

 

　　附：我以前寫過一篇博文box-sizing:border-box的作用，有興趣的小伙伴可以看看