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
let width = window.screen.width
let radio = this.getRatio()
console.log('width:', width)
console.log('radio:', radio)
if (width == 3840 && radio == 1) {
document.getElementsByTagName('body')[0].style.zoom = 1.5
} else if (width == 3072 && radio == 1.25) {
document.getElementsByTagName('body')[0].style.zoom = 1.25
} else if (width == 2560 && radio == 1.5) {
document.getElementsByTagName('body')[0].style.zoom = 1
} else if (width == 1536 && radio == 1.25) {
document.getElementsByTagName('body')[0].style.zoom = 0.7
} else if (width == 1920 && radio == 1) {
document.getElementsByTagName('body')[0].style.zoom = 0.9
} else {
document.getElementsByTagName('body')[0].style.zoom = 1.25 / window.devicePixelRatio
}
// if (width >= 3200 && radio >= 2) {
// document.getElementsByTagName('body')[0].style.zoom = 0.8;
// } else {
// // 页面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()
}
}
getRatio() {
var ratio = 0,
screen = window.screen,
ua = navigator.userAgent.toLowerCase()
if (window.devicePixelRatio !== undefined) {
ratio = window.devicePixelRatio
} else if (~ua.indexOf('msie')) {
if (screen.deviceXDPI && screen.logicalXDPI) {
ratio = screen.deviceXDPI / screen.logicalXDPI
}
} else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
ratio = window.outerWidth / window.innerWidth
}
return ratio
}
}
export default DevicePixelRatio
2.在app.vue 文件引入 created 里面 new devicePixelRatio().init()
<script>
import devicePixelRatio from './devicePixelRatio.js'
export default {
name: 'App',
created() {
new devicePixelRatio().init()
},
}
</script>