Vue项目PC端屏幕适配

根据项目的设计图   版心一般情况下居中且宽度在1200px然后背景图根据屏幕自适应大小，在小屏的笔记本等设备上就会导致页面显示不全。
接下来是处理。。。


1.新建device.js文件。

class devicePixelRatio {
	constructor() {
		//this.flag = false;
	}
	//获取系统类型
	getSystem() {
		let flag = false;
		var agent = navigator.userAgent.toLowerCase();
		//针对windows处理
		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() {
		//页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。
		document.getElementsByTagName('body')[0].style.zoom = 1 / window.devicePixelRatio;
	}
	//监听页面缩放
	watch() {
		this.addHandler(window, 'resize', function() { //注意这个方法是解决全局有两个window.resize
			//重新校正
			this.correct()
		})
	}
	//初始化页面比例
	init() {
		if(this.getSystem()) { //判断设备，目前只在windows系统下校正浏览器缩放比例
			//初始化页面校正浏览器缩放比例
			this.correct();
			//开启监听页面缩放
			this.watch();
		}
	}
}
export default devicePixelRatio;

2.再vue项目的App.vue页面引入js

import DevicePixelRatio from '@/utils/device'

3.再created函数里面调用init

new DevicePixelRatio().init();