Quartz Headless docs/ViewportService

Search documentation

Type to search the documentation.

API: Core

ViewportService

Root-level service that tracks viewport dimensions and media-query matches using reactive signals.

Overview

Root-level service that tracks viewport dimensions and media-query matches using reactive signals. Tree-shakeable and side-effect free.

SSR default: width/height start at 0 on the server (there is no window), so isMobile() reads true and isDesktop() reads false until the client's first observed resize. Consumers that branch structurally (@if) on isDesktop()/isMobile() and also use Angular's provideClientHydration() should seed a known default before first render — e.g. call setSize(width, height) from an app-level bootstrap hook (a resolver, an APP_INITIALIZER-equivalent, or the server entry point) with whatever default fits the app (assume desktop for a dashboard-style app, mobile for a content site) — otherwise the false "mobile" SSR reading can produce a structural DOM mismatch against the client's real value. setSize() is the only mechanism for this; there is no separate 'unknown' breakpoint state, since introducing one would give every consumer's boolean check a third branch to handle.

Properties

Name Type Description
readonly width Signal<number> Current viewport width in pixels.
readonly height Signal<number> Current viewport height in pixels.
readonly aspectRatio Signal<number> Aspect ratio (width / height).
readonly isMobile Signal<boolean> Viewport width is below 768px.
readonly isTablet Signal<boolean> Viewport width is between 768px and 1023px.
readonly isDesktop Signal<boolean> Viewport width is 1024px or greater.
readonly match Signal<ViewportMatchResult> Match result for default breakpoints.

Public methods

observe

observe(query: string): Signal<boolean>

Observe a custom media query string and receive a reactive signal. The signal updates automatically when the query matches/unmatches.

Parameter Type Optional Description
query string

minWidth

minWidth(px: number): Signal<boolean>

Check if viewport width is greater than or equal to a pixel value.

Parameter Type Optional Description
px number

maxWidth

maxWidth(px: number): Signal<boolean>

Check if viewport width is less than a pixel value.

Parameter Type Optional Description
px number

between

between(min: number, max: number): Signal<boolean>

Check if viewport width is within a range (inclusive).

Parameter Type Optional Description
min number
max number

setSize

setSize(width: number, height: number): void

Programmatically set viewport dimensions. Intended for testing; in production dimensions are observed from the window.

Parameter Type Optional Description
width number
height number

destroy

destroy(): void

Removes every listener registered by this instance. Idempotent; after it the service keeps its last values and no longer observes anything (new observe() calls return a constant false).