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

在 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;
}

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

• https://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers
• https://www.npmjs.com/package/detect-zoom