Отключить решение для масштабирования веб-страницы

CSS

предисловие

При разработке веб-страницы на стороне ПК было обнаружено, что система Windows часто рекомендует пользователям использовать окно масштабирования с соотношением 125% и 150%, что приводит к увеличению веб-страницы в дополнение к искусственному масштабированию кнопки. . Таким образом, после изменения параметра page devicePixelRatio (соотношение пикселей устройства) размер масштабирования тега body страницы изменяется, чтобы компенсировать изменения, вызванные параметром 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 exchange535798405,github:github.com/trsoliu

Категории