1---
2category: Sensors
3---
4 
5# useDevicePixelRatio
6 
7Reactively track [`window.devicePixelRatio`](https://developer.mozilla.org/docs/Web/API/Window/devicePixelRatio)
8 
9> NOTE: there is no event listener for `window.devicePixelRatio` change. So this function uses [`Testing media queries programmatically (window.matchMedia)`](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries) applying the same mechanism as described in [this example](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#monitoring_screen_resolution_or_zoom_level_changes).
10 
11## Usage
12 
13```ts
14import { useDevicePixelRatio } from '@vueuse/core'
15 
16const { pixelRatio } = useDevicePixelRatio()
17```
18 
19## Component Usage
20 
21```vue
22<template>
23  <UseDevicePixelRatio v-slot="{ pixelRatio }">
24    Pixel Ratio: {{ pixelRatio }}
25  </UseDevicePixelRatio>
26</template>
27```
28 
29## Type Declarations
30 
31```ts
32export interface UseDevicePixelRatioOptions extends ConfigurableWindow {}
33export interface UseDevicePixelRatioReturn {
34  pixelRatio: ShallowRef<number>
35  stop: WatchStopHandle
36}
37/**
38 * Reactively track `window.devicePixelRatio`.
39 *
40 * @see https://vueuse.org/useDevicePixelRatio
41 *
42 * @__NO_SIDE_EFFECTS__
43 */
44export declare function useDevicePixelRatio(
45  options?: UseDevicePixelRatioOptions,
46): UseDevicePixelRatioReturn
47```
48