useDevicePixelRatio

Category

Sensors

Export Size

1.27 kB

Last Changed

4 days ago

Reactively track window.devicePixelRatio

NOTE: there is no event listener for window.devicePixelRatio change. So this function uses Testing media queries programmatically (window.matchMedia) applying the same mechanism as described in this example.

Demo

sourceplayground (beta)

Device Pixel Ratio:

pixelRatio: 1

Zoom in and out (or move the window to a screen with a different scaling factor) to see the value changes

Usage

import { useDevicePixelRatio } from '@vueuse/core'

const { pixelRatio } = useDevicePixelRatio()

Component Usage

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

<template>
  <UseDevicePixelRatio v-slot="{ pixelRatio }">
    Pixel Ratio: {{ pixelRatio }}
  </UseDevicePixelRatio>
</template>

Type Declarations

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

Source

Source • Demo • Docs

Contributors

NoiseFan

Changelog

No recent changes