码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2017-06-15 10:18:53      阅读:3018      评论:0      收藏:0      [点我收藏+]

标签:nbsp   lis   content   doc   ima   load   dom   引用   logs   

例如这样

技术分享

然后这样

技术分享

 

出现这样的原因一般是   静态的,即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‘;这段代码,

2.

<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在移动端首次加载页面页面先放大后正常问题

标签:nbsp   lis   content   doc   ima   load   dom   引用   logs   

原文地址:http://www.cnblogs.com/xiaobie123/p/7011736.html

(3)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!