自适应js

;(function(){

    // 判断缩放比 解决1px 像素边框问题
    var docEl = document.documentElement
    var viewportEl = document.querySelector('meta[name="viewport"]')
    var dpr = window.devicePixelRatio || 1

    var maxWidth = 540
    var minWidth = 320

    if(dpr >= 3){
        dpr = 3
    }else if(dpr >= 2){
        dpr = 2
    }else{
        dpr = 1
    }

    docEl.setAttribute('data-dpr',dpr)
    docEl.setAttribute('max-width',maxWidth)
    docEl.setAttribute('min-width',minWidth)

    var scale = 1 / dpr
    var content = 'width=device-width, initial-scale='+ scale +',maximum-scale='+ scale +',minimum-scale='+ scale +',user-scalable=no'
    if(viewportEl){
        viewportEl.setAttribute('content',content)
    }else{
        viewportEl = document.createElement('meta')
        viewportEl.setAttribute('name','viewport')
        viewportEl.setAttribute('content',content)
        document.head.appendChild(viewportEl)
    }

    setRemUnit()
    window.addEventListener('resize',setRemUnit)
    function setRemUnit(){
        var ratio = 18.75
        var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth
       
        // console.log(viewWidth)
        if(maxWidth && (viewWidth / dpr > maxWidth)){
            viewWidth = maxWidth * dpr
        }else if(minWidth && (viewWidth / dpr < minWidth)){
            viewWidth = minWidth * dpr
        }

        docEl.style.fontSize = viewWidth / ratio + 'px'
    }
})();