在目录下新建一个js文件
在文件中写入
;(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"]={}));
然后在index.html中添加代码
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device=width,initial-scale=1.0"/>
在index.html中把之前写的rem.js文件导入到其中去
并在index.html文件中添加代码
<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>
这就算完成了,运行项目。
这样的效果不是很明显,我们把Helloworld.vue的样式改小点
再运行看看
这样子就算成功了
或者我们可以在手机上面运行一下
打开电脑的热点,让手机连接上,然后把刚才的项目的页面生成二维码,手机扫码就可以看到我们的页面了。(也有其他的方法,如果这里的方法不适用,可以去网上查看其他的,此处仅介绍这个)