Skip to content

device-detection.md

Latest commit

 

History

History
66 lines (47 loc) · 2.8 KB

device-detection.md

File metadata and controls

66 lines (47 loc) · 2.8 KB
Raw
title Device detection
description When to use $store.media and $platform — viewport, pointer, and OS signals.

Three plugins answer different “what device is this?” questions. Use the right one for each signal.

Quick reference

Question Plugin API
Viewport width, height, breakpoint? @ailuracode/alpine-media $store.media.width, .breakpoint, .isMobile
Touch, pointer, hover, orientation, reduced motion? @ailuracode/alpine-media $store.media.isTouch, .pointer, .hover, …
macOS, Windows, iOS, Android? @ailuracode/alpine-env $platform.isMac, .isIos, .name

@ailuracode/alpine-media — reactive environment

Store: $store.media

Covers everything that changes with viewport or CSS media queries:

  • Breakpoints (breakpoint, isMobile, isTablet, isDesktop)
  • Dimensions (width, height)
  • Pointer and hover (pointer, hover, isTouch, isCoarse, isFine, canHover, maxTouchPoints)
  • User/OS media preferences (prefersReducedMotion, prefersContrast, prefersColorScheme)
  • Orientation (orientation)
<nav x-show="$store.media.isMobile">Mobile nav</nav>
<button class="min-h-11" x-show="$store.media.isTouch">Large tap target</button>
<p x-show="!$store.media.canHover">No hover — use tap-friendly UI</p>

Install this for layout, responsive UI, and input-capability branching.

@ailuracode/alpine-env — platform detection

Magic: $platform (also $network, $visibility, $battery)

Static OS detection from navigator (UA, Client Hints). Does not listen to matchMedia or resize.

<p x-show="$platform.isMac">Use ⌘+K</p>
<p x-show="$platform.isWindows">Use Ctrl+K</p>
<p x-show="$platform.isIos">Add to Home Screen for notifications</p>

Use for OS-specific copy, shortcuts, or install flows — not for layout width.

Common combinations

<!-- Responsive layout + touch-friendly controls -->
<div x-show="$store.media.breakpoint === 'desktop'" class="grid grid-cols-3">...</div>
<div x-show="$store.media.breakpoint === 'mobile'" class="flex flex-col gap-4">...</div>

<!-- OS-specific shortcut hint on desktop -->
<p x-show="$store.media.breakpoint === 'desktop' && $platform.isMac">Press ⌘S to save</p>
<p x-show="$store.media.breakpoint === 'desktop' && $platform.isWindows">Press Ctrl+S to save</p>

Related