解决手淘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';这段代码,
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在移动端首次加载页面页面先放大后正常问题的更多相关文章
- JS判断访问设备(userAgent)加载不同页面 JS判断客户端操作系统类型(platform)
//平台.设备和操作系统 var system ={ win : false, mac : false, xll : false }; //检测平台 var p = navigator.platfor ...
- 解决移动端rem加载瞬间页面错乱的方法(放大或者缩小)
移动端布局有很多种,这里我们最常使用到rem+百分比的布局方式(高度/字体设置rem单位,宽度设置百分比)来处理屏幕兼容,这种方法在兼容上是比较不错的,可以使得字体以及整体适应各种大小的屏幕,可以解决 ...
- js引入php 用来加载静态页面 输出到页面中
HTML页面中加入代码 <script type="text/javascript" src="http://www.域名.com/js.php?id=tjyd&q ...
- 手淘的flexible.js解决手机适配问题
如何使用flexible.js做手机适配 做移动端网页肯定需要做适配,以前都用的fixscreen.js,对比一下,觉得flexible.js更好吧,毕竟是大厂出的东西. 第一步要给页面加在viewp ...
- js实现移动端无限加载分页
原理:当滚动条到达底部时,执行下一页内容. 判断条件需要理解三个概念: 1.scrollHeight 真实内容的高度 2.clientHeight 视窗的高度,即在浏览器中所能看到的内容的 ...
- JqueryEasyUI 解决IE下加载时页面错乱的问题 分类: JavaScript JqueryEasyUI 2014-09-20 09:50 545人阅读 评论(1) 收藏
问题描述: 一直觉得jqueryeasyui在IE下的渲染效果不大好,尤其刚进入页面时的加载,页面会出现布局错乱,虽然是一闪而过,但是给用户的体验不好: 可以通过在页面onload时,增加一个遮罩层, ...
- 解决父类加载iframe,src参数过大导致加载失败
原文:解决父类加载iframe,src参数过大导致加载失败 <iframe src="*******.do?param=****" id="leftFrame&qu ...
- js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面
js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了, ...
- Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块
传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...
随机推荐
- Hibernate入门(1)——环境搭建
什么是Hibernate?为什么使用Hibernate?Hibernate有什么优缺点?网上很多大神的文章又详细又通俗易懂. 步骤: 1.创建数据库表格. 2.编写JavaBean实体类. 3.下载H ...
- ASP.NET MVC如何在页面加载完成后ajax异步刷新
背景:之前已写过两篇有关Ajax的随笔,这一篇是单独针对在页面加载完成的Ajax操作.比如说打开学生列表页面,先加载页面,然后以Ajax的方式,从数据库中检索相应的学生信息,给浏览者更好的体验. 简单 ...
- 如何根据实体动态生成sql语句
该文章同时解决了,如何向数据库中添加Null值,以及如何处理“参数化查询未提供参数”的错误.解决方案请看第二段折叠的代码. 背景: 在项目开发的过程中,往往需要根据实体的值来修改sql语句,比如说,有 ...
- 【转】C# windows服务的创建与调试
Windows Service这一块并不复杂,但是注意事项太多了,网上资料也很凌乱,偶尔自己写也会丢三落四的.所以本文也就产生了,本文不会写复杂的东西,完全以基础应用的需求来写,所以不会对Window ...
- HDU3549 最大流 裸题
EK算法 时间复杂度o(n*m*m) 因为有反向边每次bfs时间为 n*m 每次删一条边 最多m次 代码 #include<iostream> #include<string.h& ...
- HDU——2444 The Accomodation of Students
The Accomodation of Students Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ( ...
- Triangle(dp)
Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjacent n ...
- LINUX 下 ipv6 socket 编程
大家都知道,随着互联网上主机数量的增多,现有的32位IP地址已经不够用了,所以推出了下一代IP地址IPv6,写网络程序的要稍微改变一下现有的网络程序适应IPv6网络是相当容易的事.对于我们来说就是IP ...
- 转 从头到尾彻底解析Hash表算法
出处:http://blog.csdn.net/v_JULY_v. 说明:本文分为三部分内容, 第一部分为一道百度面试题Top K算法的详解:第二部分为关于Hash表算法的详细阐述:第三部 ...
- Gerrit实现代码审计(code review)
1.Gerrit是个啥? 实现代码审计,比git(gitlab.github)多了代码审计的功能. 2.两类角色 角色1:我是代码编写者,只能写代码和提交给审计者代码,不能直接把代码合并到线上发布 角 ...