js获取浏览器缩放比例

前几天在做项目的时候遇到浏览器缩放比例不为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;
};

推荐地址:http://www.jb51.net/article/55753.htm

转载于:https://www.cnblogs.com/xiaoyaoxingchen/p/9057387.html

### 获取浏览器窗口缩放比例的方法 JavaScript 可以通过多种方式获取浏览器窗口的缩放比例。以下是一个综合的解决方案,结合了不同浏览器的兼容性处理方法。 首先,可以利用 `window.devicePixelRatio` 属性来获取设备像素比,这是现代浏览器中广泛支持的一种方法[^1]。如果该属性不可用,则可以通过检查用户代理字符串(`navigator.userAgent`)并使用其他方法进行补充。例如,在 IE 浏览器中,可以使用屏幕的物理 DPI 和逻辑 DPI 来计算缩放比例[^3]。对于其他情况,可以通过比较 `window.outerWidth` 和 `window.innerWidth` 的值来估算缩放比例[^2]。 以下是完整的实现代码: ```javascript function getScaleRatio() { let ratio = 0; const screen = window.screen; const ua = navigator.userAgent.toLowerCase(); // 使用 devicePixelRatio 如果存在 if (window.devicePixelRatio !== undefined) { ratio = window.devicePixelRatio; } // 兼容 IE 浏览器 else if (~ua.indexOf("msie") && screen.deviceXDPI && screen.logicalXDPI) { ratio = screen.deviceXDPI / screen.logicalXDPI; } // 使用 outerWidth 和 innerWidth 的比例作为替代方案 else if (window.outerWidth !== undefined && window.innerWidth !== undefined) { ratio = window.outerWidth / window.innerWidth; } // 将结果转换为百分比形式 if (ratio) { ratio = Math.round(ratio * 100); } return ratio; // 返回缩放比例,单位为百分比 } ``` 调用此函数即可获取当前浏览器窗口的缩放比例。例如: ```javascript console.log("当前浏览器缩放比例为:" + getScaleRatio() + "%"); ``` ### 注意事项 - 在某些情况下,`window.devicePixelRatio` 可能无法准确反映实际的缩放比例,尤其是在复杂的嵌套框架或特定浏览器环境中[^1]。 - 如果需要实时监测缩放比例的变化,可以结合 `window.onresize` 事件来动态更新缩放比例[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值