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) {
        //webkit
        if (window.innerHeight === window.screen.height) {
          wholeScreenFlag = true;
        } else {
          wholeScreenFlag = false;
        }
      } else {
        //IE 9+  fireFox
        if (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.浏览器不是最大化(此时浏览器宽高全凭自己拉扯决定,但是设置的宽高是自己电脑的分辨率)

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

猜你喜欢