例如这样

然后这样

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

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

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

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

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

  1. refreshRem();
  2.     //doc.body.style.fontSize = 12 * dpr + 'px';
  3.     flexible.dpr = win.dpr = dpr;
  4.     flexible.refreshRem = refreshRem;

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

2.

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

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

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

  1.  
  2. 最后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. 一道在CF上WA了9次才AC的A题题目与10个版本的代码代码

    题目(题目链接:https://codeforces.com/problemset/problem/733/A):   A. Grasshopper And the String time limit ...

  2. 【转载】CentOS6.5升级手动安装GCC4.8.2

    一.简易安装 操作环境 CentOS6.5 64bit,原版本4.4.7,不能支持C++11的特性~,希望升级到4.8.2 不能通过yum的方法升级,需要自己手动下载安装包并编译 1.1 获取安装包并 ...

  3. python013 Python3 条件控制

    Python3 条件控制Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块.可以通过下图来简单了解条件语句的执行过程: if 语句Python中if语句的一 ...

  4. Leetcode 309.最佳买卖股票时机含冷冻期

    最佳买卖股票时机含冷冻期 给定一个整数数组,其中第 i 个元素代表了第 i 天的股票价格.​ 设计一个算法计算出最大利润.在满足以下约束条件下,你可以尽可能地完成更多的交易(多次买卖一支股票): 你不 ...

  5. CodeForces 22、23部分题解

    CodeForces 22A 找严格第二小的...注意只有一种情况,可以sort排序然后unique输出. int a[N]; int main() { int n; while(~scanf(&qu ...

  6. [vijos1246]文科生的悲哀(二)

    [vijos1246]文科生的悲哀(二) 试题描述 化学不及格的Matrix67无奈选择了文科.他必须硬着头皮艰难地进行着文科的学习. 这学期的政治.历史和地理课本各有n章.每一科的教学必须按章节从前 ...

  7. [HNOI2004]宠物收养场（Treap）

    洛谷传送门 这题真是恶心,一开始没理解题意. 原来如果有狗,狗就会存在收养场中,直到有人来领养: 如果有人,人也会存在收养场中,直到有狗来被领养. 就是建一个treap,狗来把狗插进去,人来后把狗领养 ...

  8. UVA11090 Going in Cycle!! 【SPFA】

    题意:求一个无向图的边权平均值最小的环 思路:假设环中Σwi/t<ans 那变形一下就是Σwi<ans*t → Σ(wi-ans)< 0 这样就可以二分答案做了 #include & ...

  9. Postman调试依赖登录接口的3种方法

    在接口测试种, 我们经常会遇到有些接口登录后才能访问.我们在使用Postman调试这种接口时一般有3种方法: 依次请求 如果有登录接口的文档,或者通过抓包比较容易抓出登录请求的参数和格式,可以先使用P ...

  10. vs code 使用心得

    Jetbrains 家族的软件适合java,python开发,但是对与rust,shell等的开发,则显得有些臃肿,需要一款轻快的编辑器,经过挑选,在sublime3 与 vs code 中选则了vs ...