由于前端在开发时使用的都是标准ui设计图,基本都是按照所以1920*1080, 而小屏幕笔记本由于分辨率高,所以导致的显示元素变小,因此很多笔记本的默认显示都是放大125%或者150%。
如果页面比较简单就让多余的空白单边扩展,这样可以不受影响,但是如果页面遍布了引入的其他组件,就不好控制位置和大小了。
我去搜了一下,基本都是根据 window.screen.availHeight 来获取屏幕缩放比例,
window.screen.availHeight > 1000 说明缩放选择的是100%,否则是125%、150%.
在APP.vue中:
created() {
this.$nextTick(() => {
this.resizeFun();
window.addEventListener("resize", this.resizeFun);
});
},
methods: {
resizeFun() {
const devicePixelRatio = window.devicePixelRatio; // 获取下载的缩放 125% -> 1.25 150% -> 1.5
console.log(devicePixelRatio, "devicePixelRatio");
if (devicePixelRatio !== 1) {
// 如果在笔记本中用IE浏览器打开 则弹出提示
if (!!window.ActiveXObject || "ActiveXObject" in window) {
alert("balabala。。。");
} else {
const c = document.querySelector("body");
c.style.zoom = 1 / devicePixelRatio; // 修改页面的缩放比例
}
}
}
}