自适应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'

    }

})();