width:100vw和height:100vh出現滾動條的原因在於
% 是相對於父元素的大小設定的比率,vw、vh 是視窗大小決定的。
window.innerWidth = 視口寬度 = 100vw
// 打印1280
this.$refs.main.clientWidth = 父視圖寬度(body寬度) = 100%
// 打印1263
所以視口寬度其實是包含了滾動條的寬度
解決辦法:
html,body,#app{
margin: 0;
padding: 0;
height: 100%;
}
設置全局樣式表並在main.js中引入
import "./assets/css/common.css";
注意:vue開發移動端不會出現此問題
