如何检测浏览器的缩放比例？

作者: 莫帆海氵 | 来源:发表于2021-01-23 15:10 被阅读0次

如何检测浏览器的缩放比例？
iOS 图片按比例缩放
JS 获取浏览器显示比例，缩放比例
AI工具技巧
JS监听浏览器缩放比例
3D数学基础及图形开发(五)矩阵的线性变换-缩放和投影
CSS
JS - 设置图片等比缩放
UIViewContentMode
Excel的缩放比例

在 pc 端浏览器访问的页面中想知道有哪些用户访问的页面是缩放的，用于数据上报，分析处理大多数

最简单的方法通过 dpr，校验是否是默认的比例，匹配 pc 端常用的 dpr 比例

let zoom = devicePixelRatio
let isZoom = zoom % 1 !== 0 && zoom % 2 !== 0

下面的示例能满足常用的 pc 浏览器的缩放检测

/**
 * 检测浏览器缩放
 *
 * 1. 不能检测 mac 下手势缩放的
 * 2. 适用于 pc 端浏览器
 * 3. 只检测部分的浏览器
 */
function DetectZoom() {
    let global = window

  function getBrowserName() {
    let e = navigator.userAgent.toLowerCase();
    if (global.ActiveXObject || 'ActiveXObject' in global) return 'ie'
    if (e.indexOf('firefox') >= 0) return 'firefox'
    if (e.indexOf('chrome') >= 0) return 'chrome'
    if (e.indexOf('safari') >= 0) return 'safari'
    return ''
  }

  function system() {
    var t = navigator.userAgent.toLowerCase();
    if (t.indexOf('win') >= 0) return 'win'
    if (t.indexOf('mac') >= 0) return 'mac'
    return ''
  }

  function round(number) {
    return Math.round(number * 100) / 100;
  }

  function ie() {
    return global.screen.deviceXDPI / global.screen.logicalXDPI;
  }

  function firefox() {
    return global.devicePixelRatio;
  }

  function chrome() {
    return global.devicePixelRatio;
  }

  function safari() {
    return global.outerWidth / global.innerWidth;
    }
    
  this.os = system()

  let detectFuncs = { ie: ie, firefox: firefox, opera: opera, chrome: chrome, safari: safari }
  let browserName = getBrowserName()
  let func = detectFuncs[browserName]

  if (func) {
    this.zoom = round(func());
  }
}

DetectZoom.prototype.isZoom = function () {
  if ('win' === this.os) {
    return 1 != this.zoom;
  }
  if ('mac' === this.os) {
    return this.zoom % 1 !== 0 && this.zoom % 2 !== 0;
  }

  return false;
}

更全面的检测可以参考下面：