Device

Built-in device detection and responsive scaling in DS one.

DS one 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 DS one 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