前言

對(duì)于 rem 相信很多做移動(dòng)端頁(yè)面的大胸弟都不陌生，用rem加百分比來(lái)做自適應(yīng)那是爽的不能再爽。至少切一般的h5頁(yè)面是沒多大問題的。但是今天卻讓我發(fā)現(xiàn)某個(gè)三星機(jī)下面竟然出現(xiàn)頁(yè)面顯示不正常的問題，大部分安卓機(jī)跟蘋果機(jī)還是正常顯示的，也就是說，這尼瑪百分百是機(jī)型兼容性問題。經(jīng)過查看確定了是rem引起的問題。既然拋出了問題，那就得找原因跟解決辦法。

在這里，我首先想到的是安卓系統(tǒng)的問題，經(jīng)過各種百度，也證實(shí)了我的想法。網(wǎng)上有些人提出android4.4、android4.4.4系統(tǒng)下的部分安卓機(jī)就存在rem計(jì)算失常的情況。除此之外，撇開操作系統(tǒng)不說，部分機(jī)型還是存在這個(gè)問題，特別是三星的手機(jī)！如果你遇到了這個(gè)問題，那么很有可能就是三星的手機(jī)了。私下去問了個(gè)大牛，說是三星的機(jī)子確實(shí)存在這么個(gè)情況，主要是機(jī)子的屏幕引起的。ok，原因也知道了，那么就提出解決方案。

首先，先說說我自己是怎么做移動(dòng)端適配工作的，其實(shí)也是摸索過來(lái)的，如有不正確的地方還請(qǐng)指正。

1. 確定移動(dòng)端頁(yè)面的寬度范圍，通常我會(huì)取 320px - 768px ,一個(gè)是最小的尺寸，一個(gè)是ipad的，再往上感覺就沒必要在手機(jī)展示了，也不美觀。所以css的容器經(jīng)常會(huì)這樣寫，給予一個(gè)寬度范圍：

#indexContainer{
    width: 100%;
    min-width: 320px;
    max-width: 768px;
    min-height: 100%;
    font-size: .24rem;
    overflow-y: hidden;
    background-image: url(../../common/images/indexBg.png);
    background-position: 50% 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

2.全局加載一個(gè)js文件，用于動(dòng)態(tài)計(jì)算html的fontSize值。因?yàn)閞em是根據(jù)根節(jié)點(diǎn)html的字體大小而動(dòng)態(tài)改變的，所以不同寬度下計(jì)算得到不同的font-size，相應(yīng)地就可以用rem去作為頁(yè)面元素的長(zhǎng)度單位實(shí)現(xiàn)自適應(yīng)了。下面是基于美術(shù)稿720px所寫的計(jì)算fontSize的js:

(function(_D){
        var _self = {};
        _self.resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        _self.Html = _D.getElementsByTagName("html")[0];
        _self.widthProportion = function(){
            var p = Number((_D.body&&_D.body.clientWidth||_self.Html.offsetWidth)/720).toFixed(3);
            return p>1.067?1.067:p<0.444?0.444:p;
        };
        _self.changePage = function(){
            _self.Html.setAttribute("style","font-size:"+_self.widthProportion()*100+"px");
        };
        _self.changePage();
        if (!document.addEventListener) return;
        window.addEventListener(_self.resizeEvt,_self.changePage,false);
        document.addEventListener('DOMContentLoaded', _self.changePage, false);
})(document);

解釋下上面的代碼，widthProportion 函數(shù)是用來(lái)返回當(dāng)前與設(shè)計(jì)稿（720px）的比率的。因?yàn)轫?yè)面存在一個(gè)寬度范圍，即（320px - 768px）, 所以在這兩個(gè)臨界點(diǎn)大于取大，小于取小。這樣 頁(yè)面放到很大或者很小的時(shí)候字體大小也有個(gè)臨界值。監(jiān)聽 resize事件和DomContentLoaded事件，從而改變字體大小。即 changePage 函數(shù)。font-size最后乘以100是為了方便計(jì)算rem。如拿到720px的設(shè)計(jì)稿，高度250px就對(duì)應(yīng)2.5rem。

3.經(jīng)過實(shí)踐，發(fā)現(xiàn)部分安卓機(jī)出現(xiàn)的該問題大多是rem計(jì)算出來(lái)的font-size總是要比預(yù)期要大一些，甚至聽說部分三星的手機(jī)還有計(jì)算出來(lái)比預(yù)期小的情況，這簡(jiǎn)直是駭人聽聞。參考網(wǎng)上各種方法，最后綜合提出一種最為穩(wěn)妥的處理方法，就是在計(jì)算font-size值時(shí)多一步判斷來(lái)進(jìn)行頁(yè)面font-size的reset。代碼經(jīng)改動(dòng)如下：

(function(_D){
        var _self = {};
        _self.resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        _self.Html = _D.getElementsByTagName("html")[0];
        _self.widthProportion = function(){
            var p = Number((_D.body&&_D.body.clientWidth||_self.Html.offsetWidth)/720).toFixed(3);
            return p>1.067?1.067:p<0.444?0.444:p;
        };
        _self.changePage = function(){
            _self.Html.setAttribute("style","font-size:"+_self.widthProportion()*100+"px");
            _self.correctPx();
        };
        _self.correctPx = function(){
            var docEl = document.documentElement;
            var clientWidth = docEl.clientWidth;
            if (!clientWidth || clientWidth > 768) return;
            var div = document.createElement('div');
            div.style.width = '1.4rem';
            div.style.height = '0';
            document.body.appendChild(div);
            var ideal = 140 * clientWidth / 720;
            var rmd = (div.clientWidth / ideal);
            console.log(rmd);
            if(rmd > 1.2 || rmd < 0.8){
                docEl.style.fontSize = 100 * (clientWidth / 720) / rmd + 'px';
                document.body.removeChild(div);
            }

        };
        _self.changePage();
        if (!document.addEventListener) return;
        window.addEventListener(_self.resizeEvt,_self.changePage,false);
        document.addEventListener('DOMContentLoaded', _self.changePage, false);
})(document);

對(duì)比上面，多加了個(gè)correctPx函數(shù)。在每次計(jì)算完頁(yè)面的fontSize后，對(duì)某個(gè)實(shí)際元素的大小進(jìn)行判斷，如果對(duì)比原來(lái)的比例有0.2以上的出入，那就用這個(gè)比例去重新設(shè)置頁(yè)面的fontSize。如果是正常情況，就不會(huì)執(zhí)行頁(yè)面fontSize重新這一步。至此，問題也算是解決了。

總結(jié)

對(duì)比設(shè)置css來(lái)控制html的font-size我覺得用js來(lái)控制更為簡(jiǎn)潔，而且代碼改動(dòng)量小。在做移動(dòng)端適配的時(shí)候比較容易忽略的點(diǎn)是給頁(yè)面設(shè)置一個(gè)寬度范圍，還有就是怎樣根據(jù)ui給你的設(shè)計(jì)稿做出高保真的頁(yè)面。安卓機(jī)兼容這塊坑還是太多了。能填一個(gè)是一個(gè)吧，惡心。