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;
}
}
}

js浏览器缩放提示的更多相关文章

  1. js实现禁止pc端浏览器缩放和获取当前页面浏览器的缩放大小

    众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0">即可,但 ...

  2. 阻止pc端浏览器缩放js代码

    阻止pc端浏览器缩放js代码 众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable= ...

  3. Js浏览器对象

    Js浏览器对象——window对象 1.window对象: (1)window对象是BOM的核心,window对象指当前的浏览器窗口. (2)所有的JavaScript全局对象.函数以及变量均自动成为 ...

  4. 学python走过的坑 三 不能实现的浏览器缩放功能

    公司一个项目,在启动web页面时,默认应该是打开项目页面,然后浏览器启动时总是打开一个广告页面,经理让写一个脚本,让电脑每次开机自启浏览器,且加载项目页面.浏览器自启和打开项目页面轻松搞定,这时问题来 ...

  5. 修改js confirm alert 提示框文字的简单实例

    修改js confirm alert 提示框文字的简单实例: <!DOCTYPE html> <html> <head lang="en"> & ...

  6. CSS实现背景图尺寸不随浏览器缩放而变化

    方法一. 把图片作为background,方法二使用img标签.同时要有一张足够大尺寸的图片. 方法一. 把图片作为background 有几个CSS的属性要提一下:background-size:c ...

  7. atitit.js浏览器环境下的全局异常捕获

    atitit.js浏览器环境下的全局异常捕获 window.onerror = function(errorMessage, scriptURI, lineNumber) { var s= JSON. ...

  8. 【转载】IIS7.5(经典模式)访问静态资源(.css和.js文件)提示:未能执行 URL

    IIS7.5(经典模式)静态资源(.css和.js文件)提示:未能执行 URL “/”应用程序中的服务器错误. 未能执行 URL. 说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪 ...

  9. CSS 实现背景图尺寸不随浏览器缩放而变化

    <!-- Author:博客园小dee --> 一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变: 再比如花瓣网( http://www.hu ...

随机推荐

  1. IIS 配置网站

    IIS 配置网站最常见的问题 1 文件夹权限问题 (C盘 windows下temp文件夹权限问题)2 版本问题 (框架版本问题如4.0 在2.0下运行,4.5在4.0下运行) 3如果是局域网,考虑动态 ...

  2. 从零搭建HBase集群

    本文从零开始搭建大数据集群,涉及Linux集群安装搭建,Hadoop集群搭建,HBase集群搭建,Java接口封装,对接Java的C#类库封装 Linux集群搭建与配置 Hadoop集群搭建与配置 H ...

  3. k8s常用命令记录

    目录 kubectl常用命令 kubectl get pod -n dev 查看日志 查看pod详情 删除pod 删除job 进入pod里面 查看namespace 创建namespace 删除nam ...

  4. jmeter☞工作区介绍(三)

    基于jmeter4.0,jdk1.8 目录树:存放设计过程中使用的元件.执行过程中默认是从根节点开始顺序遍历元件.比如说HTTP请求的取样器就是元件,组件就是一个或多个元件的集合. 测试计划编辑区域: ...

  5. 17-使用公共 Registry

    Docker Hub 是 Docker 公司维护的公共 Registry.用户可以将自己的镜像保存到 Docker Hub 免费的 repository 中.如果不希望别人访问自己的镜像,也可以购买私 ...

  6. [Unity Shader] 逐顶点光照和逐片元漫反射光照

    书中的6.4节讲的是漫反射的逐顶点光照和逐片元光照. 前一种算法是根据漫反射公式计算顶点颜色(顶点着色器),对颜色插值(光栅化过程)返回每个像素的颜色值(片元着色器). 第二种算法是获得顶点的法线(顶 ...

  7. Java子类初始化调用父类无参构造

    实在是服了自己,子类初始化调用父类无参构造这种初学者都应该知道的事,我给忘了. 记得当初看书的时候各种概念抄在笔记本上,再上机实践,以为一辈子都不会忘,还是给忘了. 这件事说明了两个问题: 1.我没有 ...

  8. 402. Remove K Digits/738.Monotone Increasing Digits/321. Create Maximum Number

    Given a non-negative integer num represented as a string, remove k digits from the number so that th ...

  9. mongodb基本使用(三)

    MongoDB 创建数据库 语法 MongoDB 创建数据库的语法格式如下: use DATABASE_NAME 如果数据库不存在,则创建数据库,否则切换到指定数据库. 如果你想查看所有数据库,可以使 ...

  10. spring-session实现分布式集群session的共享(转)

    原文: https://www.cnblogs.com/youzhibing/p/7348337.html HttpSession是通过Servlet容器创建和管理的,像Tomcat/Jetty都是保 ...