useDevicePixelRatio

分类

传感器

导出大小

1.27 kB

上次更改

3 个月前

响应式地跟踪 window.devicePixelRatio

注意：window.devicePixelRatio 变化没有事件监听器。因此此函数使用 通过编程方式测试媒体查询 (window.matchMedia)，应用此示例中描述的相同机制。

演示

源代码在线演练 (beta)

设备像素比

pixelRatio: 1

放大缩小（或将窗口移动到具有不同缩放比例的屏幕）以查看值变化

用法

import { useDevicePixelRatio
 } from '@vueuse/core'

const { pixelRatio
 } = useDevicePixelRatio
()

组件用法

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

vue

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

类型声明

/**
 * Reactively track `window.devicePixelRatio`.
 *
 * @see https://vueuse.org.cn/useDevicePixelRatio
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function useDevicePixelRatio
(options
?: ConfigurableWindow
): {
  pixelRatio
: Readonly
<Ref
<number, number>>
  stop
: WatchStopHandle

}
export type UseDevicePixelRatioReturn
 = ReturnType
<typeof useDevicePixelRatio
>