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

时间:2024-01-27 10:19:05

  移动端布局有很多种,这里我们最常使用到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>