（一）原文：https://blog.csdn.net/JackieDYH/article/details/127628587
笔记本或者显示器 默认设置125%或者150%缩放，导致布局错乱的解决方法,现在很多14寸的笔记本，出厂默认就是150%的显示。导致很多时候我们的项目，自己开发的时候都是按照100%比例来开发的，上线了就会发现这个问题
vue项目utils下新建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 './util/devicePixelRatio'
export default {
name: 'App',
data() {
return {
}
},
created() {
new DevicePixelRatio().init()
}
}
</script>
刷新页面
不管怎么缩放，125%还是150%，页面都不会去缩放了，就不会出现错乱的问题了
（二）原文地址：https://blog.csdn.net/chriscencen/article/details/127683217
前端解决web端 125%，150%缩放，1366*768分辨率兼容问题
最近做一个需求是在web项目中打开一个新的标签页，新的标签页是要适应大屏的，但是同时要适应125%，150%缩放，1366*768分辨率兼容。所以单独对这个页面进行了兼容处理
mounted () {
window.addEventListener('resize', this.recalc, false);
this.recalc();
},
methods: {
recalc () {
// 解决 125%，150%缩放，1366*768分辨率兼容问题
// domEl为需要缩放的页面的根元素
const domEl = this.$refs.workingRef;
if (!domEl) return;
const { clientWidth, clientHeight } = document.documentElement || document.body || {};
const scaleX = clientWidth / 1920; // 分母是设计稿的宽度
const scaleY = clientHeight / 1080; // 分母是设计稿的高度
domEl.style.transform = `scale(${scaleX})`;
domEl.style.transformOrigin = "top left";
// 按照宽度的比例缩放后底部会出现空白，再用marginBottom解决这个空白问题
domEl.style.marginBottom = (scaleY - scaleX) * 1080 + 'px';
},
}
beforeDestroy () {
window.removeEventListener('resize', this.recalc);
},
<style lang="scss" scoped>
.working {
width: 1920px;
height: 1080px;
}
</style>
网友评论