Skip to content
On this page

useDevicePixelRatio

Category
Export Size
1.41 kB
Last Changed
1 hour 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

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

js
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.

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

Type Declarations

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

Source

SourceDemoDocs

Contributors

Anthony Fu
Antério Vieira
Waleed Khaled
wheat
vaakian X
Shinigami
Alex Kozack
Konstantin Barabanov

Changelog

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)
v9.2.0 on 9/5/2022
eb054 - fix: more efficient mechanism (#2044)

Released under the MIT License.