移动端布局有很多种，这里我们最常使用到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加载瞬间页面错乱的方法（放大或者缩小）的更多相关文章

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

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

  2. 解决React通过ajax加载数据更新页面不加判断会报错的问题

    通过AJAX加载数据是一个很普遍的场景.在React组件中如何通过AJAX请求来加载数据呢?首先,AJAX请求的源URL应该通过props传入:其次,最好在componentDidMount函数中加载 ...

  3. jquery中load()加载页面，刷新之后，加载的页面不显示的解决办法

    <script language="javascript" type="text/javascript"> $(function(){ $(&quo ...

  4. Jquery load()加载GB2312页面时出现乱码的解决方法

    问题描述:jquery的字符集是utf-8,load方法加载完GB2312编码静态页面后,出现中文乱码. a.php <script language="javascript" ...

  5. H5 缓存机制浅析 移动端 Web 加载性能优化

    腾讯Bugly特约作者:贺辉超 1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储, ...

  6. 使用Ajax.ActionLink时，点击对应的按钮会重新加载一个页面，而不是在当前页面的指定模块加载

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery实现图片预加载提高页面加载速度和用户体验

    我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题呢?首先我们会想到的是提高服务器性能,使用静态缓存等手段来加快图 ...

  8. jquery实现图片预加载提高页面加载速度

    使用jquery实现图片预加载提高页面加载速度和用户体 我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题 呢?首 ...

  9. js刷新页面得重新加载和页面的刷新

    1.reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当 ...

随机推荐

  1. 【Xamarin.Forms 1】App的创建与运行

    引言 本篇文章将从介绍Xamarin.Forms创建开始. 开发环境 Visual Studio 2019 16.6.2 Xamarin.Forms 4.6.0.726 Android 5.0 (AP ...

  2. 关于WebServices的调用

    1.使用soapui测试接口是否能通    具体操作步骤请查看:https://www.cnblogs.com/BINDAI/p/13201513.html Soapui请求结果集 2.获得soapu ...

  3. 带你认识网站图片img懒加载和预加载的区别

    懒加载 什么是懒加载? 懒加载也就是延迟加载.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览 ...

  4. 常用API - Arrays、Math、Object

    Arrays类 概述 此类包含用来操作数组(比如排序和搜索)的各种方法.此类还包含一个允许将数组作为列表来查看的静态工厂. 除非特别注明,否则如果指定数组引用为 null,则此类中的方法都会抛出 Nu ...

  5. 聊聊Java

    聊聊Java 笔记源于 视频教程Bilibili:狂神说Java 关注公众号:狂神说 能干嘛? 热度 TIOBE 狂神计划 三高:高可用.高性能.高并发 全球几千万的程序员都会Java,真正精通的不到 ...

  6. 介绍下重绘和回流（Repaint & Reflow），以及如何进行优化

    1. 浏览器渲染机制 浏览器采用流式布局模型(Flow Based Layout) 浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(Render Tre ...

  7. 批量删除当前文件夹下面的.svn文件夹

    for /r . %%a in (.) do @if exist "%%a\.svn" rd /s /q "%%a\.svn 使用方法: 新建text文档,复制上面的文本 ...

  8. 数据可视化之PowerQuery篇（七）Power Query应用技巧：批量更改列名

    https://zhuanlan.zhihu.com/p/130460772 ​今天分享一个PowerQuery的小技巧,导入到PowerBI中的数据,如果想要更改数据的列名,可以在PQ编辑器中直接双 ...

  9. Python并发编程06 /阻塞、异步调用/同步调用、异步回调函数、线程queue、事件event、协程

    Python并发编程06 /阻塞.异步调用/同步调用.异步回调函数.线程queue.事件event.协程 目录 Python并发编程06 /阻塞.异步调用/同步调用.异步回调函数.线程queue.事件 ...

  10. 分布式任务调度平台 → XXL-JOB 初探

    开心一刻 旁边的女乘客太吵,我实在忍无可忍,便对她说:“你能不能让我睡会儿?” 她挥手就给了我一个耳光:“你个臭流氓!” 我顿时就清醒了,理论到:“你让我睡一会怎么了吗” 她害羞的低下了头,说道:“人 ...