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.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 }
}