首先说明,这里所说的浏览器状态是指用户点击浏览器左上角的放大加号/减号所产生的页面整体变大变小的情况(快捷键:Ctrl+加号或 Ctrl+减号 或 Ctrl+滚轮上下)

实现代码如下:

detectZoom 函数的返回值如果是 100 就是默认缩放级别,大于 100 则是放大了,小于 100 则是缩小了。

 function detectZoom (){
var ratio = 0,
screen = window.screen,
ua = navigator.userAgent.toLowerCase(); 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);
} return ratio;
};
var ratio = detectZoom ()

// 打印当前缩放值
console.log(ratio) // 判断是否缩放 if(ratio > 100){
console.log("放大啦")
}else if(ratio < 100){
console.log("缩小了")
}else{
console.log("100%")
}

js获取浏览器的缩放状态,浏览器右上角的百分比缩放后的状态的更多相关文章

  1. 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名

    1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位 ...

  2. 使用原生js 获取用户访问项目的浏览器类型

    想要获取浏览器的类型很简单,网上提供了很多方法,但是看过之后,都是根据浏览器内核来判断是ie,谷歌,火狐,opeara的, 所以不能进一步判断在国内使用的主流浏览器类型,比如360,百度,搜狐浏览器等 ...

  3. (效果五)js获取客户端ip地址及浏览器信息

    在前端开发的时候,有时候为了测试需要得到访问客户的ip地址.虽说是后端来做的,但是我们前端也可以完成. 先说下获取用户ip地址,包括像ipv4,ipv6,掩码等内容,但是大部分都要根据浏览器的支持情况 ...

  4. js获取页面元素位置函数(跨浏览器)

    function getElementPos(elementId) { var ua = navigator.userAgent.toLowerCase(); var isOpera = (ua.in ...

  5. JS获取表单元素的value

    <!-- 1.option selected属性,如果我们在下拉列表里面选择了一个option那么他的selected="true" ,如果我们想设置当前的option是选中 ...

  6. JS 获取form表单的所有数据

    在HTML中用js获取通过GET.POST方法(就是在网址后加?a=b&c=d之类)传过来的表单值. 针对大家常用的获取表单方式,很多时候都是在重复的写一些代码,今天给大家贴出来的代码可以作为 ...

  7. js获取浏览器类型和版本信息

    bro () { let broName = 'Runing' let strStart = 0 let strStop = 0 let temp = '' let userAgent = windo ...

  8. js获取浏览器信息及版本(兼容IE)

    获取浏览器信息方法有很多种,但是要是兼容ie旧版本就有点麻烦了,因为很多方法在旧版本ie是不支持的,所以ie我做了单独处理,但是目前还有小问题,就是想显示QQ浏览器,搜狗浏览器..这样的,这样还实现不 ...

  9. 【转】javascript浏览器参数的操作,js获取浏览器参数

    原文地址:http://www.haorooms.com/post/js_url_canshu html5修改浏览器地址:http://www.cnblogs.com/JiangXiaoTian/ar ...

随机推荐

  1. ajax中responseText与responseXML区别

    1."responseText”属性以字符串形式返回HTTP响应:“responseXML”属性以XML形式返回HTTP响应.function getTel() {  var telText ...

  2. Github api【Restful接口规范】

    Overview This describes the resources that make up the official GitHub REST API v3. If you have any ...

  3. emacs第二天

    setq 和setq-default的区别 cursor-type是一个buffer local 变量 在每一份buffer中都有一份值 如果变量是buffer local 里面的变量 setq-de ...

  4. 前端 / JavaScript 导出PDF的实践

    1.库:jspdf,自己定义一个高宽,如A4的210mm×297mm 2.让设计给背景图(包括:页眉页脚),水印图(背景透明,高宽和你的PDF单页一致)以及很多,能设计给的设计要给,因为在pdf上,排 ...

  5. vmtools的功能

    1.vmtoools是vmware公司的组件 2.vmtools主要安装在Guest OS中 3.在workstation版本中可以是选件安装,但在vsphere中却是必选安装 4.vmtools可以 ...

  6. python paramiko的使用介绍

    一: 使用paramiko #设置ssh连接的远程主机地址和端口t=paramiko.Transport((ip,port))#设置登录名和密码t.connect(username=username, ...

  7. Qt QThread两种方式的使用:1-继承QThread重写run函数; 2- 继承QObject并moveToThread && 消息和槽在线程和依附线程间的传递

    2019年08月18日起笔 方式一:继承QThread重写run函数 MyThread.h ----------------------------------- ... class MyThread ...

  8. 作业:SSH

    作业:使用SSH通过网络远程控制电脑 在虚拟机中用apt命令安装了ssh,但多次连接都失败了,尝试了很多次.后来发现只要是虚拟机中的系统使用的ip都是一样的从而发现了问题.虚拟机的网络是被更改后的,后 ...

  9. GCN(Graph Convolutional Network)的简单公式推导

    第一步:从前一个隐藏层到后一个隐藏层,对结点进行特征变换 第二步:对第一步进行具体实现 第三步:对邻接矩阵进行归一化(行之和为1) 邻接矩阵A的归一化,可以通过度矩阵D来实现(即通过D^-1*A来实现 ...

  10. 《Linux就该这么学》培训笔记_ch09_使用ssh服务管理远程主机

    <Linux就该这么学>培训笔记_ch09_使用ssh服务管理远程主机 文章最后会post上书本的笔记照片. 文章主要内容: 配置网络服务 远程控制服务 不间断会话服务 书本笔记 配置网络 ...