使用js获取系统分辨率、系统缩放倍数和浏览器缩放倍数

做屏幕适配让人头大，用rem适配需要获取到系统缩放倍数和浏览器缩放倍数来计算根节点字体大小，网上找来找去都没看见一个满意的方案，自己折腾一个算是一个比较完美的方案吧，亲测谷歌浏览器120版本有效

// 获取缩放倍数（1*系统缩放倍数*浏览器缩放倍数）
function getZoom() {
  let zoom = 1;
  const screen = window.screen,
    ua = navigator.userAgent.toLowerCase();

  if (window.devicePixelRatio !== undefined) {
    zoom = window.devicePixelRatio;
  } else if (~ua.indexOf('msie')) {
    if (screen.deviceXDPI && screen.logicalXDPI) {
      zoom = screen.deviceXDPI / screen.logicalXDPI;
    }
  } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
    zoom = window.outerWidth / window.innerWidth;
  }
  return getDecimal(zoom);
}

const getDecimal = (num) => {
  return Math.round(num * 100) / 100;
};

function getAllZoom() {
  // 总缩放倍数
  const zoom = getZoom();
  // 屏幕分辨率
  const screenResolution = window.screen.width;
  // 获取浏览器内部宽度
  const browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  // 浏览器缩放倍数
  // 浏览器外部宽度不受浏览器缩放影响，浏览器内部宽度受影响,所以根据这个可以计算出浏览器缩放倍数（F12调试工具的占位会影响该值）
  const browserZoom = getDecimal(window.outerWidth / browserWidth);
  // 系统缩放倍数
  const systemZoom = getDecimal(zoom / browserZoom);
  // 系统分辨率
  const systemResolution = Math.round(screenResolution * systemZoom);

  console.log('系统分辨率', systemResolution, '屏幕分辨率', screenResolution, '浏览器外部宽度', window.outerWidth, '浏览器内部宽度', browserWidth, '总缩放倍数', zoom, '浏览器缩放倍数', browserZoom, '系统缩放倍数', systemZoom);

  return {
    zoom,
    browserZoom,
    systemZoom,
    systemResolution
  }
}

getAllZoom();

补完整示例

// 获取缩放倍数（1*系统缩放倍数*浏览器缩放倍数）
function getZoom() {
  let zoom = 1;
  const screen = window.screen,
    ua = navigator.userAgent.toLowerCase();

  if (window.devicePixelRatio !== undefined) {
    zoom = window.devicePixelRatio;
  } else if (~ua.indexOf('msie')) {
    if (screen.deviceXDPI && screen.logicalXDPI) {
      zoom = screen.deviceXDPI / screen.logicalXDPI;
    }
  } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
    zoom = window.outerWidth / window.innerWidth;
  }
  return getDecimal(zoom);
}

const getDecimal = (num) => {
  return Math.round(num * 100) / 100;
};
/**
 *
 * 通过postcss-pxtorem将px转换为rem单位
 * 浏览器尺寸/设计稿尺寸得出缩放系数
 * 缩放系数*换算基数得出根元素的字体大小（px）
 * 通过页面整体缩放来适配不同屏幕
 *
 */
function autoRootFontSize() {
  // 设计稿尺寸
  const designSize = 1920;
  /**
   * 换算基数
   * 和postcss-pxtorem配置的rootValue值保持一致
   *
   */
  let rootValue = 16;

  // 总缩放倍数
  const zoom = getZoom();
  // 屏幕分辨率
  const screenResolution = window.screen.width;
  // 获取浏览器内部宽度
  const browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  // 浏览器缩放倍数
  // 浏览器外部宽度不受浏览器缩放影响，浏览器内部宽度受影响,所以根据这个可以计算出浏览器缩放倍数（F12调试工具的占位会影响该值）
  const browserZoom = getDecimal(window.outerWidth / browserWidth);
  // 系统缩放倍数
  const systemZoom = getDecimal(zoom / browserZoom);
  // 系统分辨率
  const systemResolution = Math.round(screenResolution * systemZoom);

  if (systemZoom > 1 && systemResolution > designSize) {
    // 如果系统缩放倍数大于1，并且系统分辨率大于设计稿尺寸，则。需要重新计算换算基数
    rootValue = getDecimal(rootValue * (designSize / screenResolution));
  }

  // 设计稿缩放倍数
  const designScale = getDecimal(systemResolution / designSize);

  const useScale = (designScale / browserZoom / systemZoom).toFixed(1);
  // 获取根元素的字体大小
  const rootSize = getDecimal(rootValue * useScale);

  window.useScale = useScale;
  console.log('系统分辨率', systemResolution, '屏幕分辨率', screenResolution, '浏览器外部宽度', window.outerWidth, '浏览器内部宽度', browserWidth, '设计稿尺寸:', designSize, '总缩放倍数', zoom, '字体换算基数：', rootValue, '设计稿缩放倍数:', designScale, '浏览器缩放倍数', browserZoom, '系统缩放倍数', systemZoom, '最终缩放倍数', useScale, '根元素的字体大小:', rootSize);

  setTimeout(() => {
    // 延迟执行保证生效
    // 设置获取根元素的字体大小
    document.documentElement.style.fontSize = rootSize + 'px';
  });
}

// 只计算一次
autoRootFontSize();