前言
對(duì)于 rem 相信很多做移動(dòng)端頁(yè)面的大胸弟都不陌生，用rem加百分比來(lái)做自適應(yīng)那是爽的不能再爽。至少切一般的h5頁(yè)面是沒(méi)多大問(wèn)題的。但是今天卻讓我發(fā)現(xiàn)某個(gè)三星機(jī)下面竟然出現(xiàn)頁(yè)面顯示不正常的問(wèn)題，大部分安卓機(jī)跟蘋(píng)果機(jī)還是正常顯示的，也就是說(shuō)，這尼瑪百分百是機(jī)型兼容性問(wèn)題。經(jīng)過(guò)查看確定了是rem引起的問(wèn)題。既然拋出了問(wèn)題，那就得找原因跟解決辦法。
在這里，我首先想到的是安卓系統(tǒng)的問(wèn)題，經(jīng)過(guò)各種百度，也證實(shí)了我的想法。網(wǎng)上有些人提出android4.4、android4.4.4系統(tǒng)下的部分安卓機(jī)就存在rem計(jì)算失常的情況。除此之外，撇開(kāi)操作系統(tǒng)不說(shuō)，部分機(jī)型還是存在這個(gè)問(wèn)題，特別是三星的手機(jī)！如果你遇到了這個(gè)問(wèn)題，那么很有可能就是三星的手機(jī)了。私下去問(wèn)了個(gè)大牛，說(shuō)是三星的機(jī)子確實(shí)存在這么個(gè)情況，主要是機(jī)子的屏幕引起的。ok，原因也知道了，那么就提出解決方案。
首先，先說(shuō)說(shuō)我自己是怎么做移動(dòng)端適配工作的，其實(shí)也是摸索過(guò)來(lái)的，如有不正確的地方還請(qǐng)指正。
- 確定移動(dòng)端頁(yè)面的寬度范圍，通常我會(huì)取 320px - 768px ,一個(gè)是最小的尺寸，一個(gè)是ipad的，再往上感覺(jué)就沒(méi)必要在手機(jī)展示了，也不美觀。所以css的容器經(jīng)常會(huì)這樣寫(xiě)，給予一個(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所寫(xiě)的計(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)聽(tīng) resize事件和DomContentLoaded事件，從而改變字體大小。即 changePage 函數(shù)。font-size最后乘以100是為了方便計(jì)算rem。如拿到720px的設(shè)計(jì)稿，高度250px就對(duì)應(yīng)2.5rem。
3.經(jīng)過(guò)實(shí)踐，發(fā)現(xiàn)部分安卓機(jī)出現(xiàn)的該問(wèn)題大多是rem計(jì)算出來(lái)的font-size總是要比預(yù)期要大一些，甚至聽(tīng)說(shuō)部分三星的手機(jī)還有計(jì)算出來(lái)比預(yù)期小的情況，這簡(jiǎn)直是駭人聽(tīng)聞。參考網(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重新這一步。至此，問(wèn)題也算是解決了。
總結(jié)
對(duì)比設(shè)置css來(lái)控制html的font-size我覺(jué)得用js來(lái)控制更為簡(jiǎn)潔，而且代碼改動(dòng)量小。在做移動(dòng)端適配的時(shí)候比較容易忽略的點(diǎn)是給頁(yè)面設(shè)置一個(gè)寬度范圍，還有就是怎樣根據(jù)ui給你的設(shè)計(jì)稿做出高保真的頁(yè)面。安卓機(jī)兼容這塊坑還是太多了。能填一個(gè)是一個(gè)吧，惡心。
