Device
Platform info, the current display size, and the host resize event. device is a plain global
object — nothing to construct.
At a glance
if (device.platform === 'ios') toast('running on iOS')
const layout = (w: number, h: number) => {
console.log('display is', w, 'x', h, 'logical px')
}
layout(device.width, device.height) // readable any time
device.addEventListener('resize', layout) // and again on every resizePlatform info
device.platform // "web" | "android" | "ios" | string (read-only)
device.language // host language code, e.g. "en" (read-only)
device.pixelRatio // physical px per logical px; 1 on standard displays, 2–3 on retina/iOSpixelRatio is the ratio to bake a Canvas at for crisp output without hardcoding:
new Canvas(w, h, { pixelRatio: device.pixelRatio }). It falls back to 1 if the host doesn't
report one.
the web 2D/GL surface currently renders at logical resolution, so on web pixelRatio
only helps UI canvases; on iOS (physical surface) it makes 2D canvases crisp.
Display size
device.width // current display width, logical px (read-only)
device.height // current display height, logical px (read-only)The same values the resize event delivers, but readable at any time — not only inside the
listener. Both are logical px (like clientX/clientY), never physical pixels.
both are 0 until the host has reported a size. Don't lay out from device.width
at the top of a file that runs before the first frame — subscribe to resize as well.
resize event
device.addEventListener('resize', (width, height) => { }) // logical px
device.removeEventListener('resize', callback) // same function referenceFires whenever the host viewport changes (rotation, window resize). The only channel device
emits; other channel names are ignored.
Precise touch
device.setPreciseTouch(enabled: boolean) // OFF by defaultOpt into the precise-touch system where the platform supports it. When on, fast strokes are sampled at the touch digitizer's full rate (iOS coalesced touches, ≈120–240 Hz) instead of once per display frame (~60 Hz) — a pointer-heavy app (drawing, handwriting, dragging) gets more points and smoother lines. Leave it off for tap/button UIs.
host-gated — a silent no-op on hosts without a coalesced-input concept (web already coalesces pointermove; headless).
See also
- Pointer events & gestures — the events precise touch feeds
- Conventions — logical px, the
addEventListenerpattern