禁止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();
		}
	}
複製代碼

6.所有代碼

/** * @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;
複製代碼

7.使用

//vue使用
//在app.vue或者其它全局的文件中引入函數
import DevicePixelRatio from './XX/assets/js/libs/devicePixelRatio.js';
//在vue生命週期created中添加
created() {
    new DevicePixelRatio().init();
}
//其它使用
//全局引入devicePixelRatio.js
//在頁面加載之時，調用此方法初始化頁面比例
new DevicePixelRatio().init();
複製代碼

頁面在加載之時會檢測頁面的設備像素比例，而後重置頁面比例，以後啓動監聽頁面改變，發現變化就重置頁面比例；

有建議或問題能夠加羣qq交流535798405,github:github.com/trsoliu