• 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;
                }
            }
        }
  • 相关阅读:
    selenium环境搭建
    noip2020游记
    [HNOI2007]分裂游戏——博弈论好题
    [SCOI2007]压缩——区间dp
    赛道修建——二分答案
    玩诈欺的小杉——异或优化的状压dp
    【佛山市选2013】排列——发现性质与转化问题
    电话线铺设——难实现的最小生成树
    备用钥匙——分情况讨论的好dp
    喝喝喝——稍加推导的好转化
  • 原文地址:https://www.cnblogs.com/chenzeyongjsj/p/10430975.html
Copyright © 2020-2023  润新知