js浏览器缩放提示

　　data() {
        return {
            instance: null,
            isZoomOpen: false
        };
    },

　　mounted() {
        const that = this;
        this.isZoom();
        window.addEventListener("resize", function() {
            that.isZoom();
        });
    },

　　methods: {
        // 浏览器缩放提示 （打开控制台会影响准确度）
        detectZoom: function() {
            let ratio = 0,
                screen = window.screen,
                ua = navigator.userAgent.toLowerCase();
            //
            if (~ua.indexOf("firefox")) {
                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);
            }
            // 360安全浏览器下的innerWidth包含了侧边栏的宽度
            if (ratio !== 100) {
                if (ratio >= 95 && ratio <= 105) {
                    ratio = 100;
                }
            }
            return ratio;
        },
        isZoom: function() {
            if (this.detectZoom() < 100 || this.detectZoom() > 100) {
                this.zoomNotifyOpen();
            } else {
                this.zoomNotifyClose();
            }
        },
        zoomNotifyOpen: function() {
            if (!this.isZoomOpen) {
                this.isZoomOpen = true; // 加上标记防止多次提示
                this.instance = this.$notify({
                    title: "提示",
                    message:
                        "你的浏览器目前处于缩放状态，页面可能会出现错位现象，建议100%大小显示",
                    type: "info",
                    duration: 0
                });
            }
        },
        zoomNotifyClose: function() {
            if (this.instance !== null) {
                // 判断是否为null 防止bug
                this.instance.close();
                this.isZoomOpen = false;
            }
        }
    }

 

转载于:https://www.cnblogs.com/chenzeyongjsj/p/10430975.html