Create a new js file in the directory

Write to the file

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 = {}); the if (metaEl) {console. Warn (" on the basis of the existing meta tags will be to set the zoom ratio "); the 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"]={}));Copy the code

Then add the code to index.html

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

Import the rem.js file you wrote earlier into index.html

Add the code to the index.html file

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

That’s done. Run the project.

This effect is not very obvious, let’s make helloWorld.vue a little bit smaller

Let’s run it again

That would be a success

Or we could run it on the phone
Turn on the hot spot of the computer, connect the mobile phone, and then generate the TWO-DIMENSIONAL code of the page of the project just now, so that the mobile phone can see our page by scanning the code. (There are other methods, too. If this one doesn’t work, you can check out others online. This is just one of them.)