目录

• 一：为什么会出现有这个问题？
• 二：有什么解决方案？
• 三：vue项目utils下新建js
• 四：全局导入App.vue
• 五：重新进入项目
• 六：注意事项

一：为什么会出现有这个问题？

• 因为现在很多14寸的笔记本，出厂默认就是150%的显示。导致很多时候我们的项目，自己开发的时候都是按照100%比例来开发的，上线了就会发现这个问题。

二：有什么解决方案？

• 1.REM行不行？
• 2.vw行不行
• 3.百分比行不行？

都试过了，都没办法统一，所以有现在这个方案。

三：vue项目utils下新建js

• 1.文件名devicePixelRatio.js
  

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;

四：全局导入App.vue

<script>
import DevicePixelRatio from './utils/devicePixelRatio'
export default {name: 'App',data() {return {}},created() {new DevicePixelRatio().init()}
}
</script>

五：重新进入项目

发现不管怎么缩放，125%还是150%，页面都不会去缩放了，就不会出现错乱的问题了

六：注意事项

没有做兼容mac系统噢

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！