useDevicePixelRatio

响应式跟踪 window.devicePixelRatio

window.devicePixelRatio 的变化没有事件监听器。因此，此函数使用 “程序化测试媒体查询 (window.matchMedia)”，应用了此示例中描述的相同机制。

Demo

使用

import { useDevicePixelRatio } from '@vueuse/core'

export default {
  setup() {
    const { pixelRatio } = useDevicePixelRatio()

    return { pixelRatio }
  },
}

组件方式使用

此函数也通过 @vueuse/components 包提供一个无渲染组件版本。了解更多用法。

<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: Readonly<Ref<number, number>>
  stop: () => void
}
export type UseDevicePixelRatioReturn = ReturnType<typeof useDevicePixelRatio>

useDeviceOrientation

useDevicesList