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;
}
}
}
js浏览器缩放提示的更多相关文章
- js实现禁止pc端浏览器缩放和获取当前页面浏览器的缩放大小
众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0">即可,但 ...
- 阻止pc端浏览器缩放js代码
阻止pc端浏览器缩放js代码 众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable= ...
- Js浏览器对象
Js浏览器对象——window对象 1.window对象: (1)window对象是BOM的核心,window对象指当前的浏览器窗口. (2)所有的JavaScript全局对象.函数以及变量均自动成为 ...
- 学python走过的坑 三 不能实现的浏览器缩放功能
公司一个项目,在启动web页面时,默认应该是打开项目页面,然后浏览器启动时总是打开一个广告页面,经理让写一个脚本,让电脑每次开机自启浏览器,且加载项目页面.浏览器自启和打开项目页面轻松搞定,这时问题来 ...
- 修改js confirm alert 提示框文字的简单实例
修改js confirm alert 提示框文字的简单实例: <!DOCTYPE html> <html> <head lang="en"> & ...
- CSS实现背景图尺寸不随浏览器缩放而变化
方法一. 把图片作为background,方法二使用img标签.同时要有一张足够大尺寸的图片. 方法一. 把图片作为background 有几个CSS的属性要提一下:background-size:c ...
- atitit.js浏览器环境下的全局异常捕获
atitit.js浏览器环境下的全局异常捕获 window.onerror = function(errorMessage, scriptURI, lineNumber) { var s= JSON. ...
- 【转载】IIS7.5(经典模式)访问静态资源(.css和.js文件)提示:未能执行 URL
IIS7.5(经典模式)静态资源(.css和.js文件)提示:未能执行 URL “/”应用程序中的服务器错误. 未能执行 URL. 说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪 ...
- CSS 实现背景图尺寸不随浏览器缩放而变化
<!-- Author:博客园小dee --> 一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变: 再比如花瓣网( http://www.hu ...
随机推荐
- zabbix3.4 监控路由器报错No Such Instance currently exists at this OID
zabbix 3.4 监控报错No Such Instance currently exists at this OID 1.首先查看监控的路由器的监控项是否报警 监控主机报错出现这个 No Such ...
- HTTP 请求/响应报文结构
请求报文和响应报文都是由以下4部分组成: 1.请求行/响应行 2.请求头/响应头 3.空行 4.消息主体(请求体/响应体) 请求报文结构 请求行 格式为:Method Request-URI HTTP ...
- hive的优化
hive.optimize.cp=true:列裁剪hive.optimize.prunner:分区裁剪hive.limit.optimize.enable=true:优化LIMIT n语句hive.l ...
- python FTP服务器实现(Python3)
创建一个ftp.py文件(Linux环境),插入以下代码: from pyftpdlib.authorizers import DummyAuthorizer from pyftpdlib.handl ...
- trustbox文件破解
常见的破解方式,是要还原内容的二进制文件,删除加密壳部分的对应二进制数值,然后把剩下的内容保存下来,就实现了破解的任务. 淘宝破解链接:https://item.taobao.com/item.ht ...
- Linux系统下安装jdk1.8
JDK安装分为两种方式 一种是解压tar.gz配置安装, 一种是rpm安装,我这里是tar.gz安装方式 一.首先在oracle官方网下载jdk,网址如下:http://www.oracle.com ...
- Java 的 java_home, path, classpath
java_home: 指定 jdk 的安装目录. 第三方软件 Eclipse / Tomcat 在 java_home 指定的目录下查找安装好的 jdk. path: 配置 jdk 的安装目录.在命令 ...
- Invalid bound statement (not found): com.example.managerdemo.mapper.SingleTableMapper.selectAllValuesByConditionsNoPage
报Invalid bound statement (not found): com.example.managerdemo.mapper.SingleTableMapper.selectAllValu ...
- Scrum Meeting 10.25
成员 已完成任务 下一阶段任务 用时 徐越 阅读前端代码中和通信相关的部分 学习服务器配置 4h 赵庶宏 阅读前端代码中和通信相关的部分 学习服务器配置 4h 薄霖 继续做UI开发 界面优化 4h 武 ...
- 2-Sixth Scrum Meeting20151206
任务分配 闫昊: 今日完成:请假.(最近代码写得多……很累……) 明日任务:完成数据库设计. 唐彬: 今日完成:ios客户端代码的深度学习. 明日任务:读IOS讨论区后台接口. 史烨轩: 今日完成:请 ...