⬅️ Back to Table of Contents

📄 useDevicePixelRatio

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	9
📐 Interfaces	2

📚 Table of Contents

• Imports
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useDevicePixelRatio/index.ts

📦 Imports

Name	Source
ShallowRef	vue
WatchStopHandle	vue
ConfigurableWindow	../_configurable
noop	@vueuse/shared
watchImmediate	@vueuse/shared
shallowReadonly	vue
shallowRef	vue
defaultWindow	../_configurable
useMediaQuery	../useMediaQuery

---

Functions

useDevicePixelRatio(options: UseDevicePixelRatioOptions): UseDevicePixelRatioReturn

Reactively track window.devicePixelRatio.

See: https://vueuse.org/useDevicePixelRatio

Tags: @__NO_SIDE_EFFECTS__

Raw JSDoc

/**
 * Reactively track `window.devicePixelRatio`.
 *
 * @see https://vueuse.org/useDevicePixelRatio
 *
 * @__NO_SIDE_EFFECTS__
 */

Calls:

• shallowRef (from vue)
• useMediaQuery (from ../useMediaQuery)
• watchImmediate (from @vueuse/shared)
• shallowReadonly (from vue)

Code

export function useDevicePixelRatio(options: UseDevicePixelRatioOptions = {}): UseDevicePixelRatioReturn {
  const {
    window = defaultWindow,
  } = options

  const pixelRatio = shallowRef(1)
  const query = useMediaQuery(() => `(resolution: ${pixelRatio.value}dppx)`, options)
  let stop: WatchStopHandle = noop

  if (window) {
    stop = watchImmediate(query, () => pixelRatio.value = window!.devicePixelRatio)
  }

  return {
    pixelRatio: shallowReadonly(pixelRatio),
    stop,
  }
}

---

Interfaces

UseDevicePixelRatioOptions

Interface Code

export interface UseDevicePixelRatioOptions extends ConfigurableWindow {
}

UseDevicePixelRatioReturn

Interface Code

export interface UseDevicePixelRatioReturn {
  pixelRatio: Readonly<ShallowRef<number>>
  stop: WatchStopHandle
}

Properties

Name	Type	Optional	Description
pixelRatio	Readonly<ShallowRef<number>>	✗	not shown
stop	WatchStopHandle	✗	not shown

---

Generated by Syntax Scribe