Mobile terminal adaptation (APP screen adaptation)

Create a new js file

in the directory and write in the file

;(function(win,lib){
    var doc=win.document;
    var docEl=doc.documentElement;
    var metaEl=doc.querySelector('meta[name="viewport"]');
    var flexibleEl=doc.querySelector('meta[name="flexible"');
    var dpr=0;
    var scale=0;
    var tid;
    var flexible = lib.flexible || (lib.flexible = {});
    if(metaEl){
        console.warn("将根据已有的meta标签来设置缩放比例");
        var match=metaEl.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
        if(match){
            scale=parseFloat(match[1]);
            dpr=parseFloat(1/scale)
        }
    }else{
        if(flexibleEl){
            var content=flexibleEl.getAttribute("content");
            if(content){
                var initialDpr=content.match(/initial\-dpr=([\d\.]+)/);
                var maximumDpr=content.match(/maximum\-dpr=([\d\.]+)/);
                if(initialDpr){
                    dpr=parseFloat(initialDpr[1]);
                    scale=parseFloat((1/dpr).toFixed(2))
                }
                if(maximumDpr){
                    dpr=parseFloat(maximumDpr[1]);
                    scale=parseFloat((1/dpr.toFixed(2)))
                }
            }
        }
    }
    if(!dpr&&!scale){
        var isAndroid=win.navigator.appVersion.match(/android/gi);
        var isIPhone=win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio=win.devicePixelRatio;
        if(isIPhone){
            if(devicePixelRatio>=3&&(!dpr||dpr>=3)){
                dpr=3;
            }else{
                if(devicePixelRatio>=2&&(!dpr||dpr>=2)) {
                    dpr = 2;
                }else{
                    dpr=1;
                }
            }
        }else{
            dpr=1;
        }
        scale=1/dpr
    }
    docEl.setAttribute("data-dpr",dpr);
    if(!metaEl){
        metaEl=doc.createElement("meta");
        metaEl.setAttribute("name","viewport");
        if(!!win.webPageScalable){
            metaEl.setAttribute("content","initial-scale="+scale+",user-scalable=yes")
        }else{
            metaEl.setAttribute("content","initial-scale="+scale+",maximum-scale="+scale+",minimum-scale="+scale+",user-scalable=no viewport-fit=cover")
        }
        if(docEl.firstElementChild){
            docEl.firstElementChild.appendChild(metaEl)
        }else{
            var wrap=doc.createElement("div");
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML)
        }
    }
    function refreshRem() {
        var width=docEl.getBoundingClientRect().width;
        var ua=navigator.userAgent.toLowerCase();
        if(!/ipad.*yanxuan/.test(ua)){
            if(width/dpr>750){
                width=750*dpr
            }
        }
        var rem=width/10;
        docEl.style.fontSize=rem+"px";
        flexible.rem=win.rem=rem
    }
    win.addEventListener("resize",
        function () {
            clearTimeout(tid);
            tid=setTimeout(refreshRem,300)
        },
        false);
        win.addEventListener("pageshow",
            function (e) {
                if(e.persisted){
                    clearTimeout(tid);
                    tid=setTimeout(refreshRem,300)
                }
            },
            false);
        if(doc.readyState==="complete"){
            doc.body.style.fontSize=12*dpr+"px"
        }else{
            doc.addEventListener("DOMContentLoaded",
                function (e) {
                    doc.body.style.fontSize=12*dpr+"px"
                },
                false)
        }
        refreshRem();
        flexible.dpr=win.dpr=dpr;
        flexible.refreshRem=refreshRem();
        flexible.rem2px=function (d) {
            var val=parseFloat(d)*this.rem;
            if(typeof d==="string"&&d.match(/rem$/)){
                val+="px"
            }
            return val
        };
        flexible.px2rem=function (d) {
            var val=parseFloat(d)/this.rem;
            if(typeof d==="string"&&d.match(/px$/)){
                val += "rem"
            }
            return val
        }
})(window,window["lib"]||(window["lib"]={}));

Then add the code in index.html

 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device=width,initial-scale=1.0"/>

In index.html in the prior written rem.js import files to go

And add code in the index.html file

<script type="text/javascript">
    var w_win=document.documentElement.clientWidth||document.body.clientWidth;
    var _html=document.getElementsByTagName('html')[0];
    _html.style.fontSize=w_win/20+'px';
  </script>

This is considered complete, run the project.

This effect is not very obvious, let's change the style of Helloworld.vue to a smaller size

and then run it.

It's a success like this

Or we can run it
on the mobile phone, open the hotspot of the computer, connect the mobile phone, and then generate a QR code on the page of the project just now, and then scan the code on the mobile phone to see our page. (There are other methods, if the method here is not applicable, you can go to the Internet to check other methods, only this one is introduced here)