跳到主要内容

useDevicePixelRatio

分类
导出大小
1.27 kB
上次更改
3 个月前

响应式地跟踪 window.devicePixelRatio

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

演示

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

用法

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

组件用法

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

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

类型声明

ts
/**
 * 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
>

来源

源代码演示文档

贡献者

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)!: 重构组件并使其保持一致 (#4912)
v13.7.0
1b3d4 - feat: 改进类型 (#4927)
v13.6.0
d32f8 - refactor: 为所有纯函数添加 @__NO_SIDE_EFFECTS__ 注释 (#4907)
v12.3.0
59f75 - feat(toValue): 废弃 @vueuse/shared 中的 toValue,转而使用 Vue 的原生函数
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)

根据 MIT 许可证发布。