Skip to content
ailuracodeAlpine.js Toolkit · @ailuracode

Device detection

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

Quick reference

Section titled “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

Section titled “@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

Section titled “@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

Section titled “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>
Section titled “Related”