Device

Built-in device detection and responsive scaling in Design system 1.

Design system 1 includes automatic mobile and device detection with integrated responsive scaling. The device module automatically detects device type, sets CSS classes, and configures the scaling factor.

Auto-Initialization

When Design system 1 loads, it automatically:

Detects whether the device is mobile, tablet, or desktop
Adds .mobile or .desktop class to the <html> element
Sets the --sf CSS custom property for scaling
Listens for resize and orientation changes

Device Detection API

detectMobileDevice()

Returns true if the current device is mobile (phone or tablet).

import { detectMobileDevice } from "ds-one";

if (detectMobileDevice()) {
  console.log("Mobile device");
} else {
  console.log("Desktop device");
}

Detection combines:

User agent string matching
Touch capability (maxTouchPoints > 1)
Viewport size (narrow viewport ≤ 820px)

getDeviceInfo()

Returns detailed device information.

import { getDeviceInfo } from "ds-one";

const info = getDeviceInfo();
// {
//   isMobile: boolean,
//   isTablet: boolean,
//   isDesktop: boolean,
//   isTouchCapable: boolean,
//   deviceType: 'mobile' | 'tablet' | 'desktop',
//   userAgent: string,
//   screenWidth: number,
//   screenHeight: number
// }

initDeviceDetection()

Manually trigger device detection and scaling update.

import { initDeviceDetection } from "ds-one";

const deviceInfo = initDeviceDetection();

This is called automatically on load and resize, but can be invoked manually if needed.

CSS Classes

The <html> element receives device-specific classes:

/* Target mobile devices */
html.mobile .my-element {
  font-size: 18px;
}

/* Target desktop devices */
html.desktop .my-element {
  font-size: 14px;
}

App-Like Behavior

Disable browser zoom gestures for a native app feel.

import { applike } from "ds-one";

applike();

This prevents:

Double-tap to zoom
Pinch-to-zoom
Ctrl/Cmd + scroll wheel zoom

Integration with Scaling

Device detection and scaling are unified. Desktop always uses --sf: 1, while mobile devices calculate a scaling factor based on viewport width. See Scaling for details.

Best Practices

Test on real devices when possible
Use the --sf CSS variable for responsive sizing
Design mobile-first
Ensure touch targets are at least 44×44px
Test both portrait and landscape orientations