4.4 Sensors – useDevicePixelRatio
https://vueuse.org/core/useDevicePixelRatio/
作用
动态追踪devicePixelRatio的变化。
window.devicePixelRatio = 物理像素/ 设备独立像素。
没有可以监听 window.devicePixelRatio 变化的事件监听器。因此,函数以编程方式,使用媒体查询(window.matchMedia)来实现。
官方示例
import { useDevicePixelRatio } from '@vueuse/core'
export default {
setup() {
const { pixelRatio } = useDevicePixelRatio()
return { pixelRatio }
},
}
- 无渲染组件代码如下:
<template>
<UseDevicePixelRatio v-slot="{ pixelRatio }">
Pixel Ratio: {{ pixelRatio }}
</UseDevicePixelRatio>
</template>
源码分析
一般情况下,我们不需要监听pixelRatio
的变化。
export function useDevicePixelRatio({
window = defaultWindow,
}: ConfigurableWindow = {}) {
if (!window) {
return {
pixelRatio: ref(1),
}
}
const pixelRatio = ref(1)
const cleanups: Fn[] = []
const cleanup = () => {
cleanups.map(i => i())
cleanups.length = 0
}
const observe = () => {
pixelRatio.value = window.devicePixelRatio
cleanup()
/**
* window.matchMedia 查询一个媒体查询字符串,并返回一个MediaQueryList对象,表示媒体查询的结果。
* resolution是一个媒体特性,用于查询设备的分辨率
* pixelRatio.value 当前设备的像素比
* media = {
* matches: true,
* media: "(resolution: 1dppx)"
* onchange: null
* }
*/
const media = window.matchMedia(`(resolution: ${pixelRatio.value}dppx)`)
// once 表示只监听一次,因为触发了observe会重新注册
media.addEventListener('change', observe, { once: true })
cleanups.push(() => {
media.removeEventListener('change', observe)
})
}
observe()
tryOnScopeDispose(cleanup)
return { pixelRatio }
}