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.

示例

source

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>

类型声明

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

源代码

源代码 • 示例 • 文档

变更日志

No recent changes