移动端Web适配单位rem的坑你知道多少

作者: Chance722 | 来源:发表于2017-04-12 03:12 被阅读13675次

移动端Web适配单位rem的坑你知道多少
移动web开发与适配
移动端适配及pc端跳转代码
移动端rem适配
2020-10-30 web移动端
web移动端REM适配
解决vue移动端适配问题
移动端rem适配
解决vue移动端适配问题
网络编程(九）移动端布局(3)

前言

对于 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);