useDevicePixelRatio

Reactively track window.devicePixelRatio

NOTE: there is no event listener for window.devicePixelRatio change. So this function uses Testing media queries programmatically (window.matchMedia) as described in this example, but unlike the example this function subscribes to several pixelRatio scales (taken from mydevice.io) to detect any window.devicePixelRatio change.

Demo

Usage

import { useDevicePixelRatio } from '@vueuse/core'

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

    return { pixelRatio }
  },
}

import { useDevicePixelRatio } from '@vueuse/core'

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

    return { pixelRatio }
  },
}

Component Usage

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

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

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

Type Declarations

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

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