解決移動端rem載入瞬間頁面錯亂的方法（放大或者縮小）

消逝的風i發表於2020-07-27
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>

 

相關文章