useDevicePixelRatio

Category

Sensors

Export Size

294 B

Last Changed

15 minutes 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>

类型声明

/**
 * 响应式跟踪 `window.devicePixelRatio`.
 *
 * @see https://vueuse.org/useDevicePixelRatio
 */
export declare function useDevicePixelRatio(options?: ConfigurableWindow): {
  pixelRatio: Ref<number, number>
}
export type UseDevicePixelRatioReturn = ReturnType<typeof useDevicePixelRatio>

Source

Source • Demo • Docs

贡献者

Anthony Fu

丶远方

Antério Vieira

Waleed Khaled

wheat

Anthony Fu

David Hewson

vaakian X

Shinigami

Alex Kozack

Konstantin Barabanov

变更日志

v9.13.0 on 2/18/2023

83feb - fix: remove unnecessary cleanup (#2325)

v9.11.0 on 1/17/2023

d5321 - fix(components): mark defineComponent as pure (#2623)