4.4 Sensors -- useDevicePixelRatio

本文主要是介绍4.4 Sensors -- useDevicePixelRatio，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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.devicePixelRatiocleanup()/*** 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 }
}