js获取浏览器的缩放状态,浏览器右上角的百分比缩放后的状态

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

实现代码如下:

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

 1 function detectZoom (){
 2   var ratio = 0,
 3     screen = window.screen,
 4     ua = navigator.userAgent.toLowerCase();
 5   
 6    if (window.devicePixelRatio !== undefined) {
 7       ratio = window.devicePixelRatio;
 8   }
 9   else if (~ua.indexOf('msie')) {
10     if (screen.deviceXDPI && screen.logicalXDPI) {
11       ratio = screen.deviceXDPI / screen.logicalXDPI;
12     }
13   }
14   else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
15     ratio = window.outerWidth / window.innerWidth;
16   }
17     
18    if (ratio){
19     ratio = Math.round(ratio * 100);
20   }
21     
22    return ratio;
23 };
var ratio = detectZoom ()

// 打印当前缩放值
console.log(ratio)

// 判断是否缩放

if(ratio > 100){
  console.log("放大啦")  
}else if(ratio < 100){
    console.log("缩小了")
}else{
  console.log("100%")      
}

 

转载于:https://www.cnblogs.com/guoliping/p/11112481.html

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值