解决移动端rem加载瞬间页面错乱的方法（放大或者缩小）

　　移动端布局有很多种，这里我们最常使用到rem+百分比的布局方式（高度/字体设置rem单位，宽度设置百分比）来处理屏幕兼容，这种方法在兼容上是比较不错的，可以使得字体以及整体适应各种大小的屏幕，可以解决ipad等比较大屏幕的适应兼容。然而发现一些问题。页面在加载未完成前会出现瞬间错乱的现象，虽然时间不算长，但是肉眼可见，必须解决（此处以750像素的设计图为例）——加载前后页面如下图所示：

　　可以清楚的看到，加载未完成前的一小会儿，页面会出现一瞬间的崩塌现象。一开始没怎么在意这个问题，后来发现这样的页面的确影响视觉，我们知道页面加载顺序通常是”从上往下”加载的，所以在内容区域，也就是body以及body包含的DOM还未被浏览器遍历之前，我们就应该将html的font-size计算好，所以我们应当把计算字体的js放在body之前。

1.在公共的css文件设置html的根字体为font-size:100px;这样问题就解决了。等到js计算出新的根字体大小就会把原来css定义的大小覆盖，这样就可以解决也页面打开时的瞬间崩塌现象了

<script type="text/javascript">

   function resize() {

    var htmlEle = document.documentElement;

    var htmlWidth = window.innerWidth;

    if(!htmlWidth) return;

    if(htmlWidth >= 750){

        htmlEle.style.fontSize = '100px';

    }else{

        htmlEle.style.fontSize = 100 * (htmlWidth / 750) + 'px';

    }

    resize();

</script>

2.进行body进行预先隐藏处理

这里为什么不用display？display设置none是直接移除元素，而visibility设置的hidden只是将元素隐藏，保留其原本的位置。

<body id="body" style="visibility:hidden;">

3.设置定时器setTimeout

定时器在加载方法1毫秒之后，对body进行visible，这1毫秒的时候基本是可以忽视。

<script type="text/javascript">

    setTimeout(function(){

        document.getElementById('body').style.visibility = 'visible';

    },1);

</script>

解决移动端rem加载瞬间页面错乱的方法（放大或者缩小）的更多相关文章

JqueryEasyUI 解决IE下加载时页面错乱的问题分类： JavaScript JqueryEasyUI 2014-09-20 09:50 545人阅读评论(1) 收藏
问题描述: 一直觉得jqueryeasyui在IE下的渲染效果不大好,尤其刚进入页面时的加载,页面会出现布局错乱,虽然是一闪而过,但是给用户的体验不好: 可以通过在页面onload时,增加一个遮罩层, ...
解决React通过ajax加载数据更新页面不加判断会报错的问题
通过AJAX加载数据是一个很普遍的场景.在React组件中如何通过AJAX请求来加载数据呢?首先,AJAX请求的源URL应该通过props传入:其次,最好在componentDidMount函数中加载 ...
jquery中load()加载页面，刷新之后，加载的页面不显示的解决办法
<script language="javascript" type="text/javascript"> $(function(){ $(&quo ...
Jquery load()加载GB2312页面时出现乱码的解决方法
问题描述:jquery的字符集是utf-8,load方法加载完GB2312编码静态页面后,出现中文乱码. a.php <script language="javascript" ...
H5 缓存机制浅析移动端 Web 加载性能优化
腾讯Bugly特约作者:贺辉超 1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储, ...
使用Ajax.ActionLink时，点击对应的按钮会重新加载一个页面，而不是在当前页面的指定模块加载
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jQuery实现图片预加载提高页面加载速度和用户体验
我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题呢?首先我们会想到的是提高服务器性能,使用静态缓存等手段来加快图 ...
jquery实现图片预加载提高页面加载速度
使用jquery实现图片预加载提高页面加载速度和用户体我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题呢?首 ...
js刷新页面得重新加载和页面的刷新
1.reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当 ...

随机推荐

为什么总是无法访问VMware内的web服务？
除了防火墙的设置,很可能时因为你的Web服务监听的时127.0.0.1地址,构成了本机回环,只能本机访问的原因. 启动服务的时候可以尝试指定hostname为0.0.0.0或者你想监听的IP地址. [ ...
C++多种方法枚举串口号
部分方式没结果,思路应该是没错. //7. std::cout << "M8: SetupDiGetClassDevs " << std::endl; // ...
git bash中提示 bash：node： command not found
昨天小伙伴私信,git bash以及windows 的cmd命令行下均无法运行node npm. 究其原因是环境变量的问题.解决步骤: 1>在"此电脑"中右击,选择" ...
h5页面自动播放视频、音频_关于媒体文件自动全屏播放的实现方式
在移动端(ios和android)播放视频的时候,我们即使定义了autoplay属性,仍然不能自动播放.这是由于手机浏览器为了防止浪费用户的网络流量,在默认情况下是不允许媒体文件自动播放的,除非用户自 ...
Vue-base64移动端PDF展示
作为一个后端开发,写前端的一些功能也是头大,好在网友强大,网上资源比较多:做一个移动端PDF预览的功能,本来可以通过window.open(),打开的,但是没办法,做后台的小伙伴,传给前端的数据是ba ...
Xenon's Attack on the Gangs，题解
题目: 题意: 有一个n个节点的树,边权为0-n-2,定义mex(a,b)表示除了ab路径上的自然数以外的最小的自然数,求如何分配边权使得所有的mex(a,b)之和最大. 分析: 看似有点乱,我们先不 ...
Traffic Real Time Query System 圆方树+LCA
题目描述 City C is really a nightmare of all drivers for its traffic jams. To solve the traffic problem, ...
alert(1) to win Part Ⅰ
alert(1) to win Adobe: function escape(s) { s = s.replace(/"/g, '\\"'); return '<script ...
java 面向对象（三十八）：反射（二） Class类的理解与获取Class的实例
1.Class类的理解 1.类的加载过程:程序经过javac.exe命令以后,会生成一个或多个字节码文件(.class结尾).接着我们使用java.exe命令对某个字节码文件进行解释运行.相当于将某个 ...
scrapy 基础组件专题（十四）：scrapy CookiesMiddleware源码
一 Scrapy框架--cookie的获取/传递/本地保存 1. 完成模拟登陆2. 登陆成功后提取出cookie,然后保存到本地cookie.txt文件中3. 再次使用时从本地的cookie.txt中 ...