js控制页面随浏览器放大缩小,页面布局不变

一.给App.vue设置minWidth、minHeight、maxWidth以及maxHeight,值为浏览器的可视窗口大小(我的浏览器不全屏的时候是1920*937,全屏的时候是1920*1080)

1.在main.js中获取浏览器的宽高,并挂载到全局变量上以便使用

// 浏览器窗口,这个地方值不会变,你任意拉扯浏览器也不会改变,获取的是你打开项目时的初始状态
Vue.prototype.width = window.innerWidth;
Vue.prototype.height = window.innerHeight;

2.在app.vue中添加代码:

 mounted() {let that = this;// 这里的this.width和this.height就是main.js中全局挂载的两个变量this.pageSize(this.width, this.height);window.addEventListener("resize", function() {//这里传的参数是当前浏览器窗口的宽高that.pageSize(window.innerWidth, window.innerHeight);});},
methods: {pageSize(w, h) {let appDiv = document.body;if (w == window.screen.width) {if (!this.isFullscreenForNoScroll()) {// 浏览器最大化但是未全屏appDiv.style.maxWidth = w + "px";appDiv.style.maxHeight = h + "px";appDiv.style.minWidth = w + "px";appDiv.style.minHeight = h + "px";} else {// 浏览器最大化且全屏appDiv.style.maxWidth = window.screen.width + "px";appDiv.style.maxHeight = window.screen.height + "px";appDiv.style.minWidth = window.screen.width + "px";appDiv.style.minHeight = window.screen.height + "px";}} else {// 浏览器不是最大化appDiv.style.maxWidth = this.width + "px";appDiv.style.maxHeight = this.height + "px";appDiv.style.minWidth = this.width + "px";appDiv.style.minHeight = this.height + "px";}},isFullscreenForNoScroll() {let wholeScreenFlag = false;var explorer = window.navigator.userAgent.toLowerCase();if (explorer.indexOf("chrome") > 0) {//webkitif (window.innerHeight === window.screen.height) {wholeScreenFlag = true;} else {wholeScreenFlag = false;}} else {//IE 9+  fireFoxif (window.outerHeight === window.screen.height) {wholeScreenFlag = true;} else {wholeScreenFlag = false;}}return wholeScreenFlag;}}

#app {-webkit-font-smoothing: antialiased;
// 添加的这一句!!!transform-origin: 0 0;
}

二.项目中其他页面如果想占满全屏的话要用100%,不要用100vh

三.页面中字体大小用px设置,能保证在浏览器放大缩小的操作下,字体不乱,并且跟随页面放大缩小

---------------------------------------------------------手动分割线--------------------------------------------------------

展示效果如下(默认效果以及切换后效果一致):

1.浏览器最大化但是未全屏(此时本人浏览器宽高为1920*937) 

2.浏览器最大化且全屏(此时本人浏览器宽高为1920*1080)

 3.浏览器不是最大化(此时浏览器宽高全凭自己拉扯决定,但是设置的宽高是自己电脑的分辨率)