例如这样

然后这样

出现这样的原因一般是   静态的,即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在移动端首次加载页面页面先放大后正常问题的更多相关文章

  1. JS判断访问设备(userAgent)加载不同页面 JS判断客户端操作系统类型(platform)

    //平台.设备和操作系统 var system ={ win : false, mac : false, xll : false }; //检测平台 var p = navigator.platfor ...

  2. 解决移动端rem加载瞬间页面错乱的方法(放大或者缩小)

    移动端布局有很多种,这里我们最常使用到rem+百分比的布局方式(高度/字体设置rem单位,宽度设置百分比)来处理屏幕兼容,这种方法在兼容上是比较不错的,可以使得字体以及整体适应各种大小的屏幕,可以解决 ...

  3. js引入php 用来加载静态页面 输出到页面中

    HTML页面中加入代码 <script type="text/javascript" src="http://www.域名.com/js.php?id=tjyd&q ...

  4. 手淘的flexible.js解决手机适配问题

    如何使用flexible.js做手机适配 做移动端网页肯定需要做适配,以前都用的fixscreen.js,对比一下,觉得flexible.js更好吧,毕竟是大厂出的东西. 第一步要给页面加在viewp ...

  5. js实现移动端无限加载分页

    原理:当滚动条到达底部时,执行下一页内容. 判断条件需要理解三个概念:    1.scrollHeight 真实内容的高度    2.clientHeight 视窗的高度,即在浏览器中所能看到的内容的 ...

  6. JqueryEasyUI 解决IE下加载时页面错乱的问题 分类: JavaScript JqueryEasyUI 2014-09-20 09:50 545人阅读 评论(1) 收藏

    问题描述: 一直觉得jqueryeasyui在IE下的渲染效果不大好,尤其刚进入页面时的加载,页面会出现布局错乱,虽然是一闪而过,但是给用户的体验不好: 可以通过在页面onload时,增加一个遮罩层, ...

  7. 解决父类加载iframe,src参数过大导致加载失败

    原文:解决父类加载iframe,src参数过大导致加载失败 <iframe src="*******.do?param=****" id="leftFrame&qu ...

  8. js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面

    js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了, ...

  9. Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块

    传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...

随机推荐

  1. python基础——2(基本数据类型及运算符)

    目录 为何数据要区分类型? 一.数字类型 1.整型int 2.浮点型float 二.字符串str 三.列表类型list 四.字典类型 五.布尔类型 运算符的介绍 一.算术运算符 二.比较运算符 三.赋 ...

  2. JVM——内存管理和垃圾回收

    1.  何为GC 转载请注明出处:http://blog.csdn.net/seu_calvin/article/details/51892567 Java与C语言相比的一个优势是,可以通过自己的JV ...

  3. 如何在开发时用PC端对移动端页面进行调试

    原文转载于:https://cnodejs.org/topic/56ebdf2db705742136388f71 项目名称: spy-debugger 项目地址:https://github.com/ ...

  4. 大数据学习——hdfs集群启动

    第一种方式: 1 格式化namecode(是对namecode进行格式化) hdfs namenode -format(或者是hadoop namenode -format) 进入 cd /root/ ...

  5. UVALive 2957 Bring Them There

    Bring Them There Time Limit: 3000ms Memory Limit: 131072KB This problem will be judged on UVALive. O ...

  6. python011 Python3 字典

    Python3 字典字典是另一种可变容器模型,且可存储任意类型对象.字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号({})中 ,格式如 ...

  7. Linux vi替换字符串

    1. 基本的替换 :s/vivian/sky/ 替换当前行第一个 vivian 为 sky :s/vivian/sky/g 替换当前行所有 vivian 为 sky :n,$s/vivian/sky/ ...

  8. HDU 4418 高斯消元解决概率期望

    题目大意: 一个人在n长的路径上走到底再往回,走i步停下来的概率为Pi , 求从起点开始到自己所希望的终点所走步数的数学期望 因为每个位置都跟后m个位置的数学期望有关 E[i] = sigma((E[ ...

  9. Linux(5):正则表达式 & 权限

    正则表达式: 特殊符号: '' ---> 所见即所得,里面的内容都会被原封不动的输出出来 "" ---> 与单引号类似,但其中的特殊符号会被解析运行 `` ---> ...

  10. eclipse pom.xml 报错org.apache.maven.plugin.war.WarMojo的解决办法

    如题,maven项目eclipse提示pom.ml有错,提示信息就是org.apache.maven.plugin.war.WarMojo. 然后执行 maven install 出现如下错误提示 [ ...