DPR是什么：物理像素 / CSS像素

作用：进行计算

元素在设备屏幕上所占用的实际物理像素的数量=CSS像素大小*设备DPR*放大倍率

代码：

import { onUnmounted, ref } from "vue";
export const getDPR = () => {
  const dpr = ref<number>(window.devicePixelRatio);
  const observer = new ResizeObserver(() => {
    dpr.value = window.devicePixelRatio;
  });
  observer.observe(document.documentElement);
  onUnmounted(() => {
    observer.unobserve(document.documentElement);
  });
  return { dpr };
};

使用：

<script setup lang="ts">
import { getDPR } from "./getDPR";
const dpr = getDPR();
</script>