useDevicePixelRatio

反应式性地跟踪 window.devicePixelRatio

¥Reactively track window.devicePixelRatio

注意：没有 window.devicePixelRatio 更改的事件监听器。因此，该函数使用 Testing media queries programmatically (window.matchMedia)，应用与 这个例子 中描述的相同机制。

¥NOTE: there is no event listener for window.devicePixelRatio change. So this function uses Testing media queries programmatically (window.matchMedia) applying the same mechanism as described in this example.

示例

源代码playground (beta)

Device Pixel Ratio:

pixelRatio: 1

Zoom in and out (or move the window to a screen with a different scaling factor) to see the value changes

用法

¥Usage

import { useDevicePixelRatio } from '@vueuse/core'

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

    return { pixelRatio }
  },
}

组件用法

¥Component Usage

<template>
  <UseDevicePixelRatio v-slot="{ pixelRatio }">
    Pixel Ratio: {{ pixelRatio }}
  </UseDevicePixelRatio>
</template>