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 }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM