【HTML5移動端開發】[rem + 百分比佈局] 載入抖動（高度不一致）解的決方法
阿新 • • 發佈：2018-12-23
解決移動端rem+百分比佈局載入瞬間頁面抖動（高度不一致）的方法
以下的內容和觀點未經大牛級別驗證，有錯誤的地方請大牛留言指教~！ 移動端佈局有很多種，這裡我最常使用到rem+ 百分比的佈局方式（高度/字型設定rem單位，寬度設定百分比）來處理螢幕相容，這種方法在相容上是比較不錯的，可以使得字型以及整體適應各種大小的螢幕，可以解決ipad等比較大螢幕的適應相容。然而發現一些問題。 頁面在載入未完成前會出現抖動的現象，雖然時間不算長，但是肉眼可見，必須解決（此處以750畫素的設計圖為例）——載入前後頁面如下圖所示： 可以看出 載入後所呈現的內容不一樣~！
可以清楚的看到，載入未完成前的一小會兒，頁面會出現一瞬間的崩塌現象。一開始沒怎麼在意這個問題，後來發現這樣的頁面的確影響視覺，視覺和心理，於是查了下資料，並未能找出很好的解決辦法，後來自行研究了一下得到了如下幾種辦法，各有優缺點：
1.JS載入順序與載入方法
頁面載入順序通常是"從上往下"載入的，所以在內容區域，也就是body以及body包含的DOM還未被瀏覽器遍歷之前，我們就應該將html的font-size計算好。於是乎，我們應當把計算字型的js放在body之前，如下所示： 推薦——原生寫法(優化載入，加快body的顯示)：
<script type="text/javascript">
function resize() {
var htmlEle = document.documentElement;
var htmlWidth = window.innerWidth;
htmlEle.style.fontSize = 28 / 750 * htmlWidth + 'px';
} resize();
</script>
2.小技巧——對body進行CSS處理
如果不像1一樣，讓js方法在頁面載入到body之前就執行，又能保證載入完成前頁面不錯亂應該怎麼做呢！這裡運用小技巧，利用css以及js的計時器等進行處理，先讓body隱藏，在計算好html的font-size後再令其顯示。其實按道理來說，這樣的處理方式有點粗暴，但是也不是不可採用，方法如下： 1. 給html中的body新增行內樣式 style="display:none", 先設定隱藏；
但是，這樣的方法是有缺點的（至於存在多少問題，問題的大小，只能是一步步被發現）：body設定隱藏之後，body元素從頁面中被移除，而之後的js在遍歷一些元素等偶爾會出現一些問題，比如使用過swiper框架的朋友可以試下，在初始化swiper之前設定以上方法試試~！你會發現，swiper無法使用了
，無妨，後續介紹其解決方法！
