手机端rem适配加载过程中出现先小屏后全屏的过渡bug

先贴一下我的适配方式

(function(win) {
    var doc = win.document;
    var docEl = doc.documentElement;
    resizeFn ();
    window.onresize = function(){
        resizeFn ();
    };
    function resizeFn (){
        var width = docEl.getBoundingClientRect().width;
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
    };
})(window);
把屏幕尺寸调到320宽,然后配合less做适配。最开始是把js放到了公共js里,放在页面footer部分,jq在前面,自己的js在后面。但是这次出现了一个问题,就是加在过程中会出现小屏一下,然后再全屏打开。感觉就是document的rem没有设置成功的问题。
最后果然不出所料,设置rem适配,应该把修改rem的js放在head里,在dom加载之前先走了这段js,不然就会出现这个bug。
所幸直接用原生写也不麻烦,就几行代码。


随机浏览