zoukankan      html  css  js  c++  java
  • 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;
                }
            }
        }
  • 相关阅读:
    Java后端WebSocket的Tomcat实现
    Swift学习资源
    jwplayer 隐藏属性方法记载
    简单的java socket 示例
    SQL SERVER 2008/2012/2012R2/2014 设置开启远程连接(sa配置)
    JS原型继承和类式继承
    理解js中的原型链,prototype与__proto__的关系
    C# 事件(Event)
    Java 与 JavaScript 对websocket的使用
    C# 版dll 程序集合并工具
  • 原文地址:https://www.cnblogs.com/chenzeyongjsj/p/10430975.html
Copyright © 2011-2022 走看看