useDevicePixelRatio

Category

Sensors

Export Size

294 B

Last Changed

6 months 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

source

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'

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.

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

Type Declarations

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

Source

Source • Demo • Docs

Contributors

Anthony Fu

Antério Vieira

Waleed Khaled

wheat

Anthony Fu

David Hewson

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)