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. SpringBoot日记——国际化篇

    听起来高大上的国际化,起始就是在利用浏览器语言,或者页面中的中英文切换,将页面的文字在其他语言和中文进行切换,比如: 我们想让这个功能实现,点击中文,页面就是中文的,点击英文就是英文的. 国际化配置 ...

  2. Halcon中循环的相关算子

    条件<condition> ,<condition> 内为计算成an integer or boolean value的表达式. 表达式的值1则条件为真,否则为假. 1.if( ...

  3. 模块化开发之butterknife 在 library中使用

    在Android开发中butterknife是一个很好的对资源初始化的工具,它可以使你的代码简洁通俗易懂,同时配合Android ButterKnife Zelezny插件可以让你写代码的速度提升至少 ...

  4. Firefox浏览器【书签工具栏】里的网址链接无法删除的解决办法

    今天使用Firefox浏览器,发现有一些我从来都没有访问的网站出现在[书签工具栏], 也不知道是什么原因被添加进来的(可能是安装某个插件被插的),于是点删除,发现还删除不了,很是老火,研究了一番,把删 ...

  5. ltrace命令详解

    原文链接:https://ipcmen.com/ltrace 用来跟踪进程调用库函数的情况 补充说明 NAME       ltrace - A library call tracer ltrace命 ...

  6. XSS攻击防御篇

    前言   上篇文章中提到了 XSS 攻击,而且,也从几个方面介绍了 XSS 攻击带来的严重影响.那么,这篇文章中,主要是针对 XSS 攻击做一个基本的防御,看看可以通过几种方式来修复这个特别常见的安全 ...

  7. Vue 入门之数据绑定

    什么是双向绑定? Vue 框架很核心的功能就是双向的数据绑定. 双向是指:HTML 标签数据 绑定到 Vue 对象,另外反方向数据也是绑定的.通俗点说就是,Vue 对象的改变会直接影响到 HTML 的 ...

  8. “学霸系统”之NABC

    我们团队这次选择的是“学霸系统”客户端项目: 1.需求(need) 作为一款和网上教学问答系统具有相似功能的手机客户端,具体的功能已给出要求:用户管理.搜索.分类.上传下载.用户贡献与交互等功能. ( ...

  9. 07慕课网《进击Node.js基础(一)》HTTP小爬虫

    获取HTML页面 var http = require('http') var url='http://www.imooc.com/learn/348' http.get(url,function(r ...

  10. 软件共享平台的NABCD

    Need: 我感觉我们这个软件很适合现在的大学生,特别是大一大二的学生,由于在大学里面学生都在各忙各的,学生遇到问题如果自己在网上查找,这就需要花费大量的时间,如果有了这个软件学生和老师都可以在这个平 ...