Vue后台项目适配各种分辨率以及网页缩放

最近一直有人问我关于Vue的适配问题如何解决，今天就来给大家分享一下我项目的适配方案（可直接cv）

1. 各屏幕分辨率下适配展示

首先给大家展示一下我的屏幕分辨率兼容效果，方便大家来判断我的适配方案是否可行

正常1920*1080 100%

1920*1080 150%

1440*900 100%

1440*900 150%

2. 屏幕分辨率适配方案

这里就不再过多举例了，通过这四张图可以看出来页面布局并没有受到过多的影响，所以直接上代码，cv就完事了

首先下载lodash插件

npm i lodash -S

然后在App.vue中导入，此处的App.vue主要指的是主框架，因不同项目可自行选择

import _ from 'lodash'

然后给app容器挂上ref="app"

<template>
    <div id="app" ref="app">
      <router-view />
    </div>
</template>

然后在mounted使用如下方法（其中的1920以及1080为定义的画布尺寸）

<script>
import _ from "lodash";
export default {
  name: "App",
  mounted() {
    this.$nextTick(() => {
      const $app = this.$refs.app;
      // 设置 屏幕 百分比 尺寸 适配
      const standardScale = "100%" / "100%";

      window.addEventListener(
        "resize",
        _.debounce(function () {
          const docHeight = document.body.clientHeight;
          const docWidth = document.body.clientWidth;

          if (docWidth < 1680) {
            const currentScale = docHeight / docWidth;
            let [scale, translate] = [0, 0];
            if (currentScale < standardScale) {
              // 以高度计算
              scale = docHeight / 1080;
              const shouleWidth = 1920 * scale;
         
              const offsetWidth = docWidth - shouleWidth;
              translate =
                offsetWidth > 0 ? `translate(${offsetWidth / 2}px, 0)` : "";
            } else {
              // 以宽度计算
              scale = docWidth / 1920;
              const shouleHeight = 1080 * scale;
              const offsetHeight = docHeight - shouleHeight;
              translate =
                offsetHeight > 0 ? `translate(0, ${offsetHeight / 2}px)` : "";
            }
            console.log(translate);
            $app.style.cssText = `
            transform: scale(${scale}) ${translate};
            transform-origin: top left;
            min-width: 1920px;
            min-height: 1080px;
          `;
          } else {
            $app.style.cssText = "";
          }
        }),
        300
      );

      if (document.createEvent) {
        var event = document.createEvent("HTMLEvents");
        event.initEvent("resize", true, true);
        window.dispatchEvent(event);
      } else if (document.createEventObject) {
        window.fireEvent("onresize");
      }
    });
  },
};

3. 各浏览器下缩放适配展示

这里我只用谷歌浏览器和自带的Microsoft Edge浏览器展示（没有其他浏览器....）

谷歌1920*1080 50% 谷歌1920*1080 100%

谷歌1920*1080 150%

Microsoft Edge 1920*1080 50%

Microsoft Edge 1920*1080 100%

Microsoft Edge 1920*1080 150%

4. 浏览器适配方案（这里也做了分辨率适配）

创建工具evicePixelRatio.js

/**
 * @description 校正windows页面在系统进行缩放后导致页面被放大的问题，通常放大比例是125%、150%
 * **/

 class DevicePixelRatio {
	constructor() {
	}
	//获取系统类型
	_getSystem() {
		let flag = false;
		var agent = navigator.userAgent.toLowerCase();
		if(agent.indexOf("windows") >= 0) {
			return true;
		}
	}
	//获取页面缩放比例
	_addHandler(element, type, handler) {
		if(element.addEventListener) {
			element.addEventListener(type, handler, false);
		} else if(element.attachEvent) {
			element.attachEvent("on" + type, handler);
		} else {
			element["on" + type] = handler;
		}
	}
	//校正浏览器缩放比例
	_correct() {
		let t = this;
		//页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。
		document.getElementsByTagName('body')[0].style.zoom = 1 / window.devicePixelRatio;
	}
	//监听页面缩放
	_watch() {
		let t = this;
		t._addHandler(window, 'resize', function() { //注意这个方法是解决全局有两个window.resize
			//重新校正
			t._correct()
		})
	}
	//初始化页面比例
	init() {
		let t = this;
		if(t._getSystem()) { //判断设备，目前只在windows系统下校正浏览器缩放比例
			//初始化页面校正浏览器缩放比例
			t._correct();
			//开启监听页面缩放
			t._watch();
		}
	}
}
export default DevicePixelRatio;

在App.vue中导入

import DevicePixelRatio from '@/utils/DevicePixelRatio.js';
setup() {
	...
	onMounted(() => {
		new DevicePixelRatio().init();
	})
}

感谢大家阅读到结尾，本次的文章就分享到这里，总结了【vue后台管理做适配的最佳方案】，希望可以帮到大家，谢谢。