JS监听浏览器缩放比例
应用场景：
- 可在切换浏览器不同百分比时显示不同样式
- 可在切换浏览器不同百分比时控制不同的dom操作
- 。。。。。。。
完整案例：
<template>
<div id="home">
<h2 :class="text">浏览器缩放比例：{{ ratio }}</h2>
</div>
</template>
<script>
export default {
name: "home",
data() {
return {
ratio: 100,
text: "text-class",
};
},
created() {
this.getWindowRatio();
},
mounted() {
window.addEventListener("resize", () => {
this.getWindowRatio();
});
},
components: {},
methods: {
getWindowRatio() {
let ratio = 0;
let screen = window.screen;
let 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;
}
if (ratio) {
ratio = Math.round(ratio * 100);
}
switch (ratio) {
case 100:
this.text = "text-class";
break;
case 110:
this.text = "text-class2";
break;
case 125:
this.text = "text-class3";
break;
case 150:
this.text = "text-class4";
break;
}
this.ratio = ratio;
},
},
};
</script>
<style scoped>
.text-class {
color: red;
}
.text-class2 {
color: yellow;
}
.text-class3 {
color: blue;
}
.text-class4 {
color: green;
}
</style>
效果图：
浏览器缩放比例.png
