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代码，发现是这样动态设置根元素大小的：

<script>
//设置html节点的font-size值
var ua = navigator.userAgent;
if(ua.indexOf('Android 2') > -1){
timmer = setInterval(function(){
var windowWidth = $(window).width();
$("html").css('font-size',windowWidth/6.4 + 'px');
if(windowWidth > 0){
clearInterval(timmer);
}
},100);
}
else {
var windowWidth = $(window).width();
$("html").css('font-size',windowWidth/6.4 + 'px');
}
</script>

 

 

 

 

也就是说刚加载页面的时候是需要根据当前窗口的屏幕大小计算出并设置根元素的大小，而与此同时页面又开始渲染了，导致这极短的时间里字体的变得特别大，等到页面加载完全又恢复正常了。找出问题的原因所在后，转而采用媒体查询的方式来动态的设置根节点元素大小，顺利地解决了页面刚打开时页面显示不正常的问题。

 

@media screen and (min-width: 640px) {
    html{
        font-size:18px;
    }
}

@media screen and (max-width: 639px) and (min-width: 414px){
    html{
        font-size:17px;
    }
}
@media screen and (max-width: 413px) and (min-width: 321px){
    html{
        font-size:16px;
    }
}
@media screen and (max-width: 320px){
    html{
        font-size:14px;
    }
}