useDevicePixelRatio
Reactively track window.devicePixelRatio
NOTE: there is no event listener for
window.devicePixelRatiochange. So this function usesTesting 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 anywindow.devicePixelRatiochange.
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/componentspackage. 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
>
Source
Contributors
Anthony Fu
Antério Vieira
wheat
Shinigami
Alex Kozack
Konstantin Barabanov