Vue3项目：在多种浏览器上进行页面适配

前言

在使用vue3写项目的时候，原本调试好的页面在谷歌浏览器和IE浏览器上可以正常显示，但是在360浏览器上显示的时候有部分元素错位了。

解决

1、安装babel-polyfill

npm install --save-dev babel-polyfill

2、在babel.config.js文件添加内容

presets: [
  // '@vue/cli-plugin-babel/preset', 
  '@vue/app',
  [
    '@babel/preset-env',
    {
      useBuiltIns: 'entry'
    }
  ]
],
sourceType: 'unambiguous',

3、在main.js的首行引入

import 'babel-polyfill'

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中导入

<script >
import { onMounted } from "vue";
import DevicePixelRatio from '@/utils/evicePixelRatio.js';
export default {
  setup(){
    
    function bodyScale  () {
      var devicewidth = document.documentElement.clientWidth;//获取当前分辨率下			的可是区域宽度
      var scale = devicewidth / 1300; // 分母——设计稿的尺寸
      document.body.style.zoom = scale;//放大缩小相应倍数
    }

    onMounted(() => {
      new DevicePixelRatio().init();
      bodyScale();
    })

  },

  return(){
      bodyScale
    }
}
</script>

参考

参考1

参考2