方式一(推荐)
页面head中加入
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
也可以解决点击输入框时候页面放大问题
方式二
这个方法有一定的限制
<template>
<div id="app">
<!-- <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> -->
<meta name="viewport" id="viewportMeta">
<router-view/>
</div>
</template>
<script>
export default {
mounted (){
var initViewport = function(height){
var metaEl = document.querySelector("#viewportMeta");
console.log(metaEl);
var content = "height=" + height + ",width=device-width,initial-scale=1.0,user-scalable=no";
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', content);
}
var realHeight = window.innerWidth > window.innerHeight ? window.innerWidth : window.innerHeight
initViewport(realHeight);
}
}
</script>