例如这样

然后这样

出现这样的原因一般是   静态的，即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. maven添加本地jar包到本地仓库

    1 进入jar包所在文件夹,进入cmd命令 2 执行命令 mvn install:install-file -Dfile=ojdbc6.jar -DgroupId=com.oracle -Dartif ...

  2. Android开发——使用ADB Shell命令实现模拟点击（支付宝自动转账实现）

    首先声明,本人反对一切利用技术的违法行为 本文的实现代码已经销毁,本文以介绍流程为主 1.这里所说的模拟点击不是在自己的APP里点击,点自己APP上的控件没什么好说的 不仅是支付宝转账,其他的获取别人 ...

  3. 二分图最大权完美匹配KM算法

    KM算法二分图 KM求得二分图与普通二分图的不同之处在于:此二分图的每条边(男生女生)上都附了权值(好感度).然后,求怎样完美匹配使得权值之和最大. 这,不止一般的麻烦啊. 可以通过一个期望值来求. ...

  4. NIUDAY 11.23 北京站抢票啦 | 看 AI 落地行业 享 AI 时代红利

    2018 年是见证「奇迹」的一年.AI 从多年的热门话题中开始走下神坛,逐渐深入到了各个行业,加速经济结构优化及行业智慧化升级,AI 已不再是难以企及的神话而是可触摸的美好未来. 政策支持加上资本推动 ...

  5. 在RedHat 5下安装Oracle 10g详解(转)

    在RedHat 5下安装Oracle 10g详解(转) Posted on 2012-09-14 13:26 疯狂 阅读(5075) 评论(0)  编辑  收藏 所属分类: database .uni ...

  6. Python的另一种开发环境--Anaconda中的Spyder

    本文作者LucyGill,转载请注明出处(虽然我觉得并不会有人转载). 刚开始学Python的时候,我用的是其自带的idle(安装Python后,在开始菜单里可以找到),后来发现在eclipse中设置 ...

  7. Request获取Session的两种方式

    1.无请求参数 public HttpSession getSession() 获取当前request关联的session,如果当前request没有session,创建一个session. 2.有请 ...

  8. Git学习之常见错误 clone被拒绝

    Git学习之常见错误 问题: git clone 时 报错 Permission Denied (权限被拒绝). 解决方法: 需要把本地的公钥上传到服务器. 解决步骤: ①第一步,设置本地的git的用 ...

  9. css三大布局

    标准流: 从左到右,从上到下块级元素独占一行,行内元素碰到父盒子边缘换行 浮动: 特点 1 元素浮动之后不占据原来的位置(脱标),变成立体,下面可以有东西,只影响下面的 2 浮动的盒子在一行上显示 3 ...

  10. SVN 学习笔记-高级操作

    所谓高级操作,只是曲高和寡,其实都不怎么用的.但是关键时候,可能会很有用. 这个高级只是针对基本操作而言.有些操作可能也是比较基本的. 清除锁 有时候我们在操作的时候,可能系统崩溃了,或者SVN非正常 ...