DevicePixelRatio ​

Reactive wrapper around window.devicePixelRatio. Track device pixel ratio changes (zoom level or display density) with Angular signals.

Loading demo...

Usage ​

angular-ts
import { Component } from '@angular/core';
import { devicePixelRatio } from '@signality/core';

@Component({
  template: `
    <p>Pixel Ratio: {{ pixelRatio() }}</p>
  `,
})
export class PixelRatioDemo {
  readonly pixelRatio = devicePixelRatio(); 
}

Use InjectionToken for Singleton

For global state tracking like devicePixelRatio, consider using the provided DEVICE_PIXEL_RATIO token instead of calling the function directly. This provides a singleton instance that can be shared across your entire application, reducing memory usage and event listener overhead:

typescript
import { inject } from '@angular/core';
import { DEVICE_PIXEL_RATIO } from '@signality/core';

const pixelRatio = devicePixelRatio(); 
const pixelRatio = inject(DEVICE_PIXEL_RATIO);

Learn more about Token-based utilities.

Parameters ​

ParameterTypeDescription
optionsDevicePixelRatioOptionsOptional configuration (see Options below)

Options ​

The DevicePixelRatioOptions extends Angular's CreateSignalOptions<number> and WithInjector:

OptionTypeDescription
initialValuenumberInitial value for SSR (default: 1)
equalValueEqualityFn<number>Custom equality function (see more)
debugNamestringDebug name for the signal (development only)
injectorInjectorOptional injector for DI context

Return Value ​

Returns a Signal<number> containing the current device pixel ratio value.

Examples ​

Adaptive image loading ​

angular-ts
import { Component, computed } from '@angular/core';
import { devicePixelRatio } from '@signality/core';

@Component({
  template: `
    <img [src]="imageSrc()" alt="Responsive image" />
  `,
})
export class AdaptiveImage {
  readonly pixelRatio = devicePixelRatio();

  readonly imageSrc = computed(() => {
    const ratio = this.pixelRatio();
    if (ratio >= 2) return '/images/logo@2x.png';
    if (ratio >= 1.5) return '/images/logo@1.5x.png';
    return '/images/logo.png';
  });
}

SSR Compatibility ​

On the server, the signal initializes with 1 (default pixel ratio). You can provide a custom initial value:

typescript
const pixelRatio = devicePixelRatio({
  initialValue: 2
});

Type Definitions ​

typescript
type DevicePixelRatioOptions = CreateSignalOptions<number> & WithInjector;

function devicePixelRatio(options?: DevicePixelRatioOptions): Signal<number>;
Edit this page on GitHub Last updated: Apr 11, 2026, 21:22:30