Skip to content

useDevicePixelRatio

类别
导出体积
1.27 kB
上次更改
last month

自动跟踪 window.devicePixelRatio

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

示例

设备像素比:
pixelRatio: 1
放大和缩小(或将窗口移动到具有不同缩放因子的屏幕)以查看值的变化

用法

ts
import { 
useDevicePixelRatio
} from '@vueuse/core'
const {
pixelRatio
} =
useDevicePixelRatio
()

组件用法

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

类型声明

ts
/**
 * 响应式跟踪 `window.devicePixelRatio`.
 *
 * @see https://vueuse.org/useDevicePixelRatio
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function 
useDevicePixelRatio
(
options
?:
ConfigurableWindow
): {
pixelRatio
:
Readonly
<
Ref
<number, number>>
stop
:
WatchStopHandle
} export type
UseDevicePixelRatioReturn
=
ReturnType
<typeof
useDevicePixelRatio
>

源码

源码演示文档

贡献者

Anthony Fu
一纸忘忧
Antério Vieira
SerKo
Anthony Fu
Waleed Khaled
wheat
IlyaL
Yu Lia
Robin
Fernando Fernández
David Hewson
vaakian X
Shinigami
Alex Kozack
Konstantin Barabanov

更新日志

8c521 - feat(components)!: refactor components and make them consistent (#4912)
1b3d4 - feat: improve types (#4927)
d32f8 - refactor: add @__NO_SIDE_EFFECTS__ annotations to all pure functions (#4907)
59f75 - feat(toValue): deprecate toValue from @vueuse/shared in favor of Vue's native
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)