APP H5頁面顯示優化

     在開發移動端APP頁面時，對各操做系統各類型號的手機進行適配是必須的。然鵝，上週在開發完一個落地頁後，被測試給打了回來，其中列出了一個在我看來很小的問題：單擊進入頁面的時候，頁面還沒加載完的時候字體顯得特別大，整個頁面不美觀，網速快的時候還好網速慢的時候這種現象可能會停留1s到2s，等頁面加載完就恢復正常了。遂仔細查找緣由並順利解決這個問題。

    說到移動端字體的適配，那不得不提到px,em,rem這三個單位了。先來回顧一下其基本概念：

px: 絕對長度單位，即你設置了多少就是多少，在各類屏幕大小的設備上顯示的大小都是同樣的。

em:相對長度單位，相對於其父級元素進行計算而獲得的值,在全部現代瀏覽器中，1em默認的字體大小都是「16px」。例：當父元素的大小爲10px，設置子元素0.3em，那麼子元素的大小換算成絕對單位就是10*0.3=3px大小了。

rem:相對長度單位，但它是相對於根元素而言的，頁面中的根元素指的是html，咱們經過設置html的字體大小就能夠控制rem的大小。好比，設置html的font-size:20px;子元素btn的font-size:0.6rem,那麼換算成絕對單位就是0.6*20=12px大小了

        因此在兼容不一樣屏幕大小設備的時候rem單位是很好的選擇，但經檢查發現我這個出問題的頁面的確用的就是rem相對單位呢，那就是根元素設置的不對，回看js代碼，發現是這樣動態設置根元素大小的：

 1 <script>
 2 //設置html節點的font-size值
 3 var ua = navigator.userAgent;
 4 if(ua.indexOf('Android 2') > -1){
 5 timmer = setInterval(function(){
 6 var windowWidth = $(window).width();
 7 $("html").css('font-size',windowWidth/6.4 + 'px');
 8 if(windowWidth > 0){
 9 clearInterval(timmer);
10 }
11 },100);
12 }
13 else {
14 var windowWidth = $(window).width();
15 $("html").css('font-size',windowWidth/6.4 + 'px');
16 }
17 </script>

 

 

 

 

也就是說剛加載頁面的時候是須要根據當前窗口的屏幕大小計算出並設置根元素的大小，而與此同時頁面又開始渲染了，致使這極短的時間裏字體的變得特別大，等到頁面加載徹底又恢復正常了。找出問題的緣由所在後，轉而採用媒體查詢的方式來動態的設置根節點元素大小，順利地解決了頁面剛打開時頁面顯示不正常的問題。

 

 1 @media screen and (min-width: 640px) {
 2     html{
 3         font-size:18px;
 4     }
 5 }
 6 
 7 @media screen and (max-width: 639px) and (min-width: 414px){
 8     html{
 9         font-size:17px;
10     }
11 }
12 @media screen and (max-width: 413px) and (min-width: 321px){
13     html{
14         font-size:16px;
15     }
16 }
17 @media screen and (max-width: 320px){
18     html{
19         font-size:14px;
20     }
21 }