思路:
获取浏览器窗口分辨率,以1080P标准分辨率为基础,进行等比缩放。
并将窗口分辨率进行动态绑定,当窗口大小发生变化时,实时进行等比缩放以保证布局。
该方法同样适用与笔记本的屏幕缩放,因为笔记本小屏的缩放本质上就是按照固定比例改变屏幕像素值
data(){
return {
clientWidth:'',//用于监控浏览器分辨率变化
}
},
created (){
this.zoom();
window.onresize = () => {
return (() => {
this.clientWidth = document.documentElement.clientWidth
})()
}
},
watch: {
clientWidth: {
handler: function(newVal,oldVal) {
this.zoom();
},
// immediate: true
// deep: true
},
},
methods: {
zoom(){
// 缩放
// let t = window.devicePixelRatio // 获取下载的缩放 125% -> 1.25 150% -> 1.5
let t = 1920 / document.documentElement.clientWidth //根据标准分辨率整体缩放
if (!!window.ActiveXObject || "ActiveXObject" in window) {
if (t != 1) {
// 如果在笔记本中用IE浏览器打开 则弹出提示
alert('您的设备对显示进行放大导致页面显示不完全,请调整后打开/或用其他浏览器')
}
} else {
// 如果进行了缩放,也就是不是1
let c = document.querySelector('body')
c.style.zoom = -0.6 * t + 1.55; // 就去修改页面的缩放比例,这个公式我自己算的,不准确,勉强。
}
},
},