禁止web页面缩放解决方案

pc端web页面开发时,发现windows系统经常推荐用户使用125%、150%比例的缩放窗口。这样导致web页面被进行缩放,除此之外还有人为的按钮缩放。故此,在页面devicePixelRatio(设备像素比例)变化后,通过计算页面body标签zoom修改其大小,来抵消devicePixelRatio带来的变化。

1. 获取系统类型(判断是不是需处理的系统,目前只有windows系统下有此问题)
 	_getSystem() {
		let flag = false;
		var agent = navigator.userAgent.toLowerCase();
		//var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
		//if(isMac) {
		//  return false;
		//}
		//现只针对windows处理,其它系统暂无该情况,如有,继续在此添加
		if(agent.indexOf("windows") >= 0) {
			return true;
		}
	}
2. 监听方法兼容写法
    _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;
		}
	}
3. 校正浏览器缩放比例
    _correct() {
		let t = this;
		document.getElementsByTagName('body')[0].style.zoom = 1 / window.devicePixelRatio;
	}
4. 监听页面缩放
    _watch() {
		let t = this;
		t._addHandler(window, 'resize', function() { //注意这个方法是解决全局有两个window.resize
			//重新校正
			t._correct()
		})
	}
5. 初始化页面比例
    init() {
		let t = this;
		if(t._getSystem()) { //判断设备,目前只在windows系统下校正浏览器缩放比例
			//初始化页面校正浏览器缩放比例
			t._correct();
			//开启监听页面缩放
			t._watch();
		}
	}
下面是全部代码
/**
 * @author trsoliu
 * @date  2019-12-05
 * @description 校正windows页面在系统进行缩放后导致页面被放大的问题,通常放大比例是125%、150%
**/

class DevicePixelRatio {
	constructor() {
		//this.flag = false;
	}
	//获取系统类型
	_getSystem() {
		let flag = false;
		var agent = navigator.userAgent.toLowerCase();
		//		var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
		//		if(isMac) {
		//			return false;
		//		}
		//现只针对windows处理,其它系统暂无该情况,如有,继续在此添加
		if(agent.indexOf("windows") >= 0) {
			return true;
		}
	}
	//获取页面缩放比例
	//	_getDevicePixelRatio() {
	//		let t = this;
	//	}
	//监听方法兼容写法
	_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;
使用
//vue使用
//在app.vue或者其它全局的文件中引入函数
//在vue生命周期created中添加
import DevicePixelRatio from './XX/assets/js/libs/devicePixelRatio.js';
created() {
    new DevicePixelRatio().init();
}

//其它使用
//全局引入devicePixelRatio.js
//在页面加载之时,调用此方法初始化页面比例
new DevicePixelRatio().init();

//vue-admin-template-master中使用
//在程序主入口main.js中全局引入devicepixelRation.js
import DevicePixelRatio from '@/assets/js/devicePixelRatio.js';
在new Vue({})中添加vue的全局生命周期
new Vue({
#你的其它代码,
created() {
    new DevicePixelRatio().init();
}
})
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值