useDevicePixelRatio

Category

Sensors

Export Size

309 B

Last Changed

3 hours ago

响应式地跟踪 window.devicePixelRatio

注意：没有 window.devicePixelRatio 变化的事件监听器。所以这个函数使用 程序化测试媒体查询 (window.matchMedia) ，应用与 这个示例 中描述的相同机制。

Demo

source

设备像素比：

pixelRatio: 1

放大和缩小（或将窗口移动到具有不同缩放因子的屏幕）以查看值的变化

用法

import { useDevicePixelRatio } from '@vueuse/core'

export default {
  setup() {
    const { pixelRatio } = useDevicePixelRatio()

    return { pixelRatio }
  },
}

组件用法

<template>
  <UseDevicePixelRatio v-slot="{ pixelRatio }">
    像素比: {{ pixelRatio }}
  </UseDevicePixelRatio>
</template>

Type Declarations

/**
 * Reactively track `window.devicePixelRatio`.
 *
 * @see https://vueuse.org/useDevicePixelRatio
 */
export declare function useDevicePixelRatio(options?: ConfigurableWindow): {
  pixelRatio: Readonly<Ref<number, number>>
  stop: () => void
}
export type UseDevicePixelRatioReturn = ReturnType<typeof useDevicePixelRatio>

Source

Source • Demo • Docs

Contributors

jorshen

Changelog

No recent changes