js中如何判断浏览器是否被缩放

先看看一下一段代码：

/** 当前页面是不是100%显示 */
export const changeRatio = () => {
  let ratio = 0;
  const screen: any = window.screen;
  const 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;
};

这段代码通过获取设备的像素密度比例，并将其转换为百分比后返回。从而即可判断当前浏览器是否已被缩放。

关于window.screen

window.screen 是 JavaScript 中的一个全局对象，用于表示用户屏幕的信息。它提供了关于屏幕的各种属性和方法，可以用于获取屏幕的宽度、高度、像素密度等信息。
以下是 window.screen 对象的一些常用属性：
screen.width：屏幕的宽度以像素为单位）
screen.height：屏幕的高度（以像素为单位）
screen.availWidth：屏幕的可用宽度（排除任务栏等占用的空间）
screen.availHeight：屏幕的可用高度（排除任务栏等占用的空间）
screen.pixelDepth：屏幕的颜色深度（每个像素的位数）
screen.orientation：屏幕的方向（横向或纵向）
screen.deviceXDPI 和 screen.logicalXDPI 是属于 screen 对象的属性，用于表示屏幕的水平像素密度。
screen.deviceXDPI ：该属性表示屏幕的物理水平像素密度，即每英寸的物理像素数。它提供了屏幕硬件的实际像素密度信息。
screen.logicalXDPI：该属性表示屏幕的逻辑水平像素密度，即每英寸的逻辑像素数。逻辑像素是指在 CSS 和页面布局中使用的单位，而不考虑屏幕的实际物理像素密度。

关于window.devicePixelRatio

window.devicePixelRatio 是一个 JavaScript 属性，用于获取设备的像素密度。它表示物理像素和 CSS 像素之间的比例关系。
在高分辨率屏幕上，设备的像素密度通常比标准屏幕要高。例如，Retina显示屏具有更高的像素密度，因此在相同的屏幕尺寸下，它可以显示更多的像素。为了在高分辨率屏幕上正确显示内容，开发人员可以使用 window.devicePixelRatio 来进行适配。
window.devicePixelRatio 的值表示设备的像素密度与标准屏幕的比例。例如，如果 window.devicePixelRatio 的值为 2，表示设备的像素密度是标准屏幕的两倍。这意味着在相同的屏幕尺寸下，每个 CSS 像素对应于设备的 2 个物理像素。
开发人员可以使用 window.devicePixelRatio 来调整网页中的元素尺寸、图像分辨率和样式，以确保在不同像素密度的设备上获得一致的显示效果。

const rate = changeRatio(); // 当前页面不是100%显示
if (rate != 100) {
  // TODO
}

以上我们就可以在需要判断缩放的地方调用changeRatio方法，当它的返回值不等于100时，就证明当前浏览器是已经被缩放或放大。