or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

device-detection.md index.md system-information.md version-testing.md

tile.json

tessl/npm-mobile-detect

Device detection library that analyzes User-Agent strings to identify mobile devices, tablets, phones, operating systems, browsers, and device capabilities

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/mobile-detect@1.4.x

To install, run

npx @tessl/cli install tessl/npm-mobile-detect@1.4.0

Mobile Detect

Mobile Detect is a JavaScript library that provides comprehensive device detection capabilities by analyzing User-Agent strings. It identifies mobile devices, tablets, phones, operating systems, browsers, and specific device versions for both client-side and server-side environments.

Package Information

Package Name: mobile-detect
Package Type: npm
Language: JavaScript
Installation: npm install mobile-detect

Core Imports

const MobileDetect = require('mobile-detect');

For ES6 modules:

import MobileDetect from 'mobile-detect';

For browser usage:

<script src="mobile-detect.js"></script>
<!-- Available as window.MobileDetect -->

Basic Usage

const MobileDetect = require('mobile-detect');

// Create instance with User-Agent string
const md = new MobileDetect(
  'Mozilla/5.0 (Linux; U; Android 4.0.3; en-in; SonyEricssonMT11i Build/4.1.A.0.562) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30'
);

// Detect device types
console.log(md.mobile());     // 'Sony'
console.log(md.phone());      // 'Sony' 
console.log(md.tablet());     // null

// Detect system information
console.log(md.os());         // 'AndroidOS'
console.log(md.userAgent());  // 'Safari'

// Test device characteristics  
console.log(md.is('iPhone')); // false
console.log(md.is('android')); // true

// Get version information
console.log(md.version('Webkit')); // 534.3
console.log(md.mobileGrade());      // 'A'

Architecture

Mobile Detect operates through several key components:

Constructor Pattern: Create instances with User-Agent strings for analysis
Device Detection: Identify specific device manufacturers and models using pattern matching
System Analysis: Extract operating system, browser, and version information
Classification: Categorize devices as mobile/tablet/phone with capability grading
Pattern Matching: Internal regex-based detection rules for comprehensive device support
Caching: Internal result caching for performance optimization

Capabilities

Device Type Detection

Core device identification functionality for determining if a device is mobile, phone, or tablet, along with manufacturer detection.

class MobileDetect {
  constructor(userAgent: string, maxPhoneWidth?: number);
  
  mobile(): string | null;
  phone(): string | null;  
  tablet(): string | null;
}

Device Detection

System Information Detection

Extract detailed information about operating systems, browsers, and User-Agent characteristics from device strings.

class MobileDetect {
  userAgent(): string | null;
  userAgents(): string[];
  os(): string | null;
}

System Information

Version and Testing Utilities

Advanced functionality for version extraction, device testing, and pattern matching against User-Agent strings.

class MobileDetect {
  version(key: string): number;
  versionStr(key: string): string | null;
  is(key: string): boolean;
  match(pattern: string | RegExp): boolean;
  isPhoneSized(maxPhoneWidth?: number): boolean | undefined;
  mobileGrade(): string;
}

// Static methods
MobileDetect.version: string;
MobileDetect.isPhoneSized(maxPhoneWidth?: number): boolean | undefined;

Version and Testing

Types

/**
 * MobileDetect constructor
 * @param userAgent - The User-Agent string to analyze (required)
 * @param maxPhoneWidth - Optional maximum width in pixels to consider as phone-sized
 *                        (default: 600). Only used for isPhoneSized() method in browser environments.
 *                        Has no effect in server-side environments.
 */
class MobileDetect {
  constructor(userAgent: string, maxPhoneWidth?: number);
}

/**
 * Rule definition interfaces for type safety
 */
interface MobileDetectRules {
  [key: string]: string | RegExp;
}

interface MobileDetectComplexRules {
  [key: string]: string | RegExp | string[] | RegExp[];
}

/**
 * Internal implementation interface (for extensibility and monkey-patching only)
 * Warning: These methods are internal and may change between versions
 */
interface MobileDetectImpl {
  mobileDetectRules: {
    phones: MobileDetectRules;
    tablets: MobileDetectRules;
    oss: MobileDetectRules;
    uas: MobileDetectRules;
    props: MobileDetectComplexRules;
    utils: MobileDetectRules;
  };
  detectMobileBrowsers: {
    fullPattern: RegExp;
    shortPattern: RegExp;
    tabletPattern: RegExp;
  };
  FALLBACK_PHONE: string;
  FALLBACK_TABLET: string;
  FALLBACK_MOBILE: string;
  
  // Internal methods (not recommended for public use)
  findMatch(rules: MobileDetectRules, userAgent: string): string;
  findMatches(rules: MobileDetectRules, userAgent: string): string[];
  getVersionStr(propertyName: string, userAgent: string): string;
  getVersion(propertyName: string, userAgent: string): number;
  prepareVersionNo(version: string): number;
  isMobileFallback(userAgent: string): boolean;
  isTabletFallback(userAgent: string): boolean;
  prepareDetectionCache(cache: Object, userAgent: string, maxPhoneWidth?: number): void;
  mobileGrade(md: MobileDetect): string;
  detectOS(userAgent: string): string;
  getDeviceSmallerSide(): number;
}

Important Notes

Reliability Warning: User-Agent based detection is inherently unreliable due to constantly changing patterns and spoofing
Alternatives Recommended: Feature detection (Modernizr) and media queries are preferred for most use cases
Environment Support: Works in browsers, Node.js, and other JavaScript environments
Pattern Updates: Detection patterns require continuous updates as new devices are released
Performance: Internal caching optimizes repeated method calls on the same instance