禁止web頁面縮放解決方案

trsoliu發表於2019-12-06
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

相關文章