Vue 通过 VueUse 的 useDevicePixelRatio 来获取屏幕像素比

Vue  通过 VueUse 的 useDevicePixelRatio 来获取屏幕像素比。

代码示例

import { useDevicePixelRatio } from '@vueuse/core'

const { pixelRatio } = useDevicePixelRatio()

组件示例

<script setup lang="ts">
import { ref } from 'vue'
import { UseDevicePixelRatio } from '@vueuse/components'
</script>
<template>
  <UseDevicePixelRatio v-slot="{ pixelRatio }">
    Pixel Ratio: {{ pixelRatio }}
  </UseDevicePixelRatio>
</template>

在线例子

例子

类型定义

/**
 * Reactively track `window.devicePixelRatio`.
 *
 * @see https://vueuse.org/useDevicePixelRatio
 */
export declare function useDevicePixelRatio(options?: ConfigurableWindow): {
  pixelRatio: Ref<number>
}
export type UseDevicePixelRatioReturn = ReturnType<typeof useDevicePixelRatio>