来一套移动端通用代码

此代码根据屏幕尺寸计算html font-size, 可实现1px像素border。
当页面宽度为375px;对应的物理像素为750px;
可直接根据750px设计稿里面的元素尺寸计算相应的rem值（其html font-size为20px）。
建议使用scss定义一个function，代码如下：

@function px2rem($px){
    $rem : 16px; // 基于屏幕宽度为750px 的html字体大小。
    @return ($px/$rem) + rem;
}

通用代码入下：

 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- 禁止数字识别为电话号码 -->
    <meta name="format-detection" content="telephone=no">
    <!-- 忽略邮箱 -->
    <meta name="format-detection" content="email=no">
     <script>
        var viewport = document.querySelector("meta[name=viewport]");

            // 以物理像素显示页面元素
            var scale = 1/window.devicePixelRatio;
            if (window.devicePixelRatio == 1) {  
                viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');  
            }else if(window.devicePixelRatio == 2) {
                viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');  
            }else if(window.devicePixelRatio == 3) {
                viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');  
            }else{
                viewport.setAttribute('content', 'width=device-width,initial-scale='+scale+', maximum-scale='+scale+', minimum-scale='+scale+', user-scalable=no');
            }
            var docEl = document.documentElement;   
            var fontsize = 8 * (docEl.clientWidth / 375) + 'px';  
            docEl.style.fontSize = fontsize; 
            window.onresize=function(){
                fontsize = 8 * (docEl.clientWidth / 375) + 'px';  
                docEl.style.fontSize = fontsize; 
            }
    </script>