解决手淘lib-flexible.js在移动端首次加载页面页面先放大后正常问题

Posted 2020-09-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了解决手淘lib-flexible.js在移动端首次加载页面页面先放大后正常问题相关的知识，希望对你有一定的参考价值。

例如这样

技术分享

然后这样

技术分享

出现这样的原因一般是静态的，即html里有一些静态的（即非js动态添加的）

如果在页面加载完成后，页面是用js动态添加的，这个问题就不太明显，

doc.addEventListener(‘DOMContentLoaded‘, function(e) {
            doc.body.style.fontSize = 12 * dpr + ‘px‘;
        }, false);

这段代码是起主要作用的，但是这段代码是在页面初始化完毕才执行的（即把把其他引用的js文件下载好，并且里面的函数都初始完成），

这样，在页面加载的一瞬间，我们会看到页面先先放大的，不解释了，太晚了，直接说解决方案把。

refreshRem();
    //doc.body.style.fontSize = 12 * dpr + ‘px‘;
    flexible.dpr = win.dpr = dpr;
    flexible.refreshRem = refreshRem;

1.在 refreshRem();后面加上doc.body.style.fontSize = 12 * dpr + ‘px‘;这段代码，

<body>
<script type="text/javascript" src="js/lib/flexible_css.js" ></script>
  <script type="text/javascript" src="js/lib/flexible.js" ></script>

把这两个js放在body的头部（），一定要放在这里，

不然 doc.body.style.fontSize = 12 * dpr + ‘px‘; 我们加的这段代码会报错，原因是可能是页面还没有body元素



最后ps一句：这个方案的原理就是在body刚加载完就计算fontsize，这样修改的会不会对其他方面就影响我还不太清楚，请懂得同学，告诉一下，谢谢

以上是关于解决手淘lib-flexible.js在移动端首次加载页面页面先放大后正常问题的主要内容，如果未能解决你的问题，请参考以下文章