移动端解决适配问题

只需要在index.html中的body上方添加下列代码即可

<script type="text/javascript">
    function  loadScreen(){
        var dpr,rem,scale;
        var docEl=document.documentElement;
        var fontEL=document.createElement('style');
        var Width=window.screen.availWidth;
        var metaEl=document.querySelector('meta[name="viewport"]');
        dpr=window.devicePixelRatio || 1;
        rem=Width*dpr / 10;
        scale=1 / dpr;

        // console.log(dpr,rem,scale,Width,window.screen.width);
        //设置viewport;进行缩放，达到高清效果
        metaEl.setAttribute('content','width='+Width*dpr+',initial-scale='
            +scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no');
        //设置data-dpr属性，留作的css hack之用
        docEl.setAttribute('data-dpr',dpr);

        //动态写入样式
        docEl.firstElementChild.appendChild(fontEL);
        fontEL.innerHTML='html{font-size:'+rem+'px!important;}';

        //给js调用的，某一dpr下rem和px之间的转换函数
    window.rem2px=function(v){
        v=parseFloat(v);
        return v*rem;
    }
    window.px2rem=function(v){
        v=parseFloat(v);
        return v/rem;
    }
    window.dpr=dpr;
    window.rem=rem;
    }
    window.onresize=loadScreen;
    loadScreen();

</script>