博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js浏览器缩放提示
阅读量:5322 次
发布时间:2019-06-14

本文共 2252 字,大约阅读时间需要 7 分钟。

  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

你可能感兴趣的文章
缓存使用场景
查看>>
fatal error: error writing to /tmp/ccXIKnDg.s: No space left on device
查看>>
跨域方法:JSONP、iframe
查看>>
配置 archlinux 之安装 xfce
查看>>
数据结构与算法JavaScript描述
查看>>
每周总结③
查看>>
项目打包结构
查看>>
log4j
查看>>
linux下setsockopt函数的使用
查看>>
我的第一个python web开发框架(36)——后台菜单管理功能
查看>>
eclipse开发创建web项目
查看>>
iphone常见机型微信网页可视高度
查看>>
移动混合开发之HTML5在移动开发中的准则
查看>>
以Qemu模拟Linux,学习Linux内核
查看>>
Hadoop 综合大作业
查看>>
hexo安装
查看>>
python日期及时间格式转换
查看>>
MSP与PSP
查看>>
Android 使用RecyclerView SnapHelper详解
查看>>
Android开发学习:[15]自动导入包
查看>>