Vize
device-pixel-ratio
Track window.devicePixelRatio (zoom and moving between displays).
| Package | @vizejs/composable/device-pixel-ratio |
| Own the source | vize lib pull composable:device-pixel-ratio |
| Runtime exports | useDevicePixelRatio |
| Gzip budget | 1280 B |
Usage
import { useDevicePixelRatio } from "@vizejs/composable/device-pixel-ratio";
Runtime contract
| Utility | Category | Stability | SSR | Hydration | Cleanup | Targets | Host globals | Uses |
|---|---|---|---|---|---|---|---|---|
useDevicePixelRatio |
media | experimental | deterministic-fallback | stable | reactive-scope | web, desktop | window |
tryOnScopeDispose |
API
useDevicePixelRatio
Track window.devicePixelRatio (zoom and moving between displays). Subscribes to a (resolution: <ratio>dppx) media query and re-subscribes with the new ratio after each change, which is the only change signal the platform offers. Server renders expose ssrPixelRatio.
function useDevicePixelRatio( options: UseDevicePixelRatioOptions = {}, ): DevicePixelRatioControls
Types
DevicePixelRatioHost
Window-like capability observed by useDevicePixelRatio.
| Member | Type | Description |
|---|---|---|
matchMedia |
(query: string) => MediaQueryList |
Create an observable result for a media query. |
devicePixelRatio |
number |
Ratio of physical to CSS pixels. |
UseDevicePixelRatioOptions
Options for useDevicePixelRatio.
| Member | Type | Description |
|---|---|---|
ssrPixelRatio? |
number |
Ratio exposed during server rendering. |
host? |
MaybeRefOrGetter<DevicePixelRatioHost | null | undefined> |
Reactive window capability for alternate runtimes and tests. |
DevicePixelRatioControls
Reactive ratio returned by useDevicePixelRatio.
| Member | Type | Description |
|---|---|---|
pixelRatio |
Readonly<Ref<number>> |
Current device pixel ratio. |
isSupported |
Readonly<Ref<boolean>> |
Whether a window capability is attached. false during server rendering. |