前言
对于 rem 相信很多做移动端页面的大胸弟都不陌生，用rem加百分比来做自适应那是爽的不能再爽。至少切一般的h5页面是没多大问题的。但是今天却让我发现某个三星机下面竟然出现页面显示不正常的问题，大部分安卓机跟苹果机还是正常显示的，也就是说，这尼玛百分百是机型兼容性问题。经过查看确定了是rem引起的问题。既然抛出了问题，那就得找原因跟解决办法。
在这里，我首先想到的是安卓系统的问题，经过各种百度，也证实了我的想法。网上有些人提出android4.4、android4.4.4系统下的部分安卓机就存在rem计算失常的情况。除此之外，撇开操作系统不说，部分机型还是存在这个问题，特别是三星的手机！如果你遇到了这个问题，那么很有可能就是三星的手机了。私下去问了个大牛，说是三星的机子确实存在这么个情况，主要是机子的屏幕引起的。ok，原因也知道了，那么就提出解决方案。
首先，先说说我自己是怎么做移动端适配工作的，其实也是摸索过来的，如有不正确的地方还请指正。
- 确定移动端页面的宽度范围，通常我会取 320px - 768px ,一个是最小的尺寸，一个是ipad的，再往上感觉就没必要在手机展示了，也不美观。所以css的容器经常会这样写，给予一个宽度范围：
#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.全局加载一个js文件，用于动态计算html的fontSize值。因为rem是根据根节点html的字体大小而动态改变的，所以不同宽度下计算得到不同的font-size，相应地就可以用rem去作为页面元素的长度单位实现自适应了。下面是基于美术稿720px所写的计算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 函数是用来返回当前与设计稿（720px）的比率的。因为页面存在一个宽度范围，即（320px - 768px）, 所以在这两个临界点大于取大，小于取小。这样 页面放到很大或者很小的时候字体大小也有个临界值。监听 resize事件和DomContentLoaded事件，从而改变字体大小。即 changePage 函数。font-size最后乘以100是为了方便计算rem。如拿到720px的设计稿，高度250px就对应2.5rem。
3.经过实践，发现部分安卓机出现的该问题大多是rem计算出来的font-size总是要比预期要大一些，甚至听说部分三星的手机还有计算出来比预期小的情况，这简直是骇人听闻。参考网上各种方法，最后综合提出一种最为稳妥的处理方法，就是在计算font-size值时多一步判断来进行页面font-size的reset。代码经改动如下：
(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);
对比上面，多加了个correctPx函数。在每次计算完页面的fontSize后，对某个实际元素的大小进行判断，如果对比原来的比例有0.2以上的出入，那就用这个比例去重新设置页面的fontSize。如果是正常情况，就不会执行页面fontSize重新这一步。至此，问题也算是解决了。
总结
对比设置css来控制html的font-size我觉得用js来控制更为简洁，而且代码改动量小。在做移动端适配的时候比较容易忽略的点是给页面设置一个宽度范围，还有就是怎样根据ui给你的设计稿做出高保真的页面。安卓机兼容这块坑还是太多了。能填一个是一个吧，恶心。
