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 ...
随机推荐
- Qt 利用XML文档,写一个程序集合 四
接上一篇https://www.cnblogs.com/DreamDog/p/9214067.html 启动外部程序 这里简单了,直接上代码吧 connect(button,&MPushBut ...
- ThinkPHP学习笔记(一)----初识ThinkPHP
在做微信开发的时候原本使用来yii框架,后续觉得yii虽然功能强大使用方便,但是整个框架太大了,不适合一些轻量级的开发:这个时候发现thinkphp这个框架,框架本身很小,只有几M,但麻雀虽小,但五脏 ...
- 3.编写sub过程及开发函数——《Excel VBA 程序开发自学宝典》
3.1 编写sub过程 实例: Sub 建立10个表() If sheets.count>=10 then exit sub Sheets.add , sheets(sheets.count) ...
- django1.11入门
快速安装指南¶ 在使用Django之前,您需要安装它.我们有 完整的安装指南,涵盖所有可能性; 本指南将指导您进行简单,最小化的安装,在您完成介绍时可以正常工作. 安装Python¶ 作为一个Pyth ...
- Git----02本地仓库进行文件添加&修改&删除&查看
一.将新文件上传到本地仓库----使用小乌龟工具 1.1.将文件添加到暂存区 进入仓库目录,创建文件,添加暂存区 1.2.将文件添加到本地仓库 选中已经添加到暂存区的文件,进行提交 二.查看本 ...
- Codeforces1101 | EducationalRound58 | 瞎讲报告
目录 Educational Codeforces Round 58 (Rated for Div. 2) A. Minimum Integer B. Accordion C. Division an ...
- 占位符golang
定义示例类型和变量 type Human struct { Name string } var people = Human{Name:"zhangsan"} 普通占位符 占位符 ...
- centos6.9+lnmp1.5环境部署swoole记录
hiredis下载地址:https://github.com/redis/hiredis/releasesunzip hiredis-v0.13.3.zipmake -jsudo make insta ...
- LINUX开发使用的3个远程工具
1,SecureCRT 2,SSH Secure Shell Client 3,VNC Viewer 如果想VNC Server启动时加载vncserver服务 需要修改/etc/rc.d/rc.lo ...
- Linux常用软件安装与配置——目录
http://blog.csdn.net/clevercode/article/details/45740431