CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-mobile-detect

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

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

version-testing.mddocs/

Version and Testing Utilities

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

Capabilities

Version Extraction

Extract numeric and string versions of various components from the User-Agent string.

/**
 * Get the version (as Number) of the given property in the User-Agent
 * @param key - A key defining a thing which has a version (case-insensitive)
 *              Supported keys: Mobile, Build, Version, VendorID, browser names, OS names
 * @returns The version as floating-point Number (e.g., 91.0, 14.6) or NaN if version is not found
 */
version(key: string): number;

/**
 * Get the version (as String) of the given property in the User-Agent  
 * @param key - A key defining a thing which has a version (case-insensitive)
 *              Same supported keys as version() method
 * @returns The "raw" version as String (e.g., '91.0.4472.124', '14_6') or null if version is not found
 */
versionStr(key: string): string | null;

Supported Version Keys:

Mobile/Browsers: Mobile, Build, Version, VendorID, iPad, iPhone, iPod, Kindle, Chrome, Coast, Dolfin, Firefox, Fennec, Edge, IE, NetFront, NokiaBrowser, Opera, Opera Mini, Opera Mobi, UCBrowser, MQQBrowser, MicroMessenger, baiduboxapp, baidubrowser, SamsungBrowser, Iron, Safari, Skyfire, Tizen, Webkit, PaleMoon, SailfishBrowser, Gecko, Trident, Presto, Goanna

Operating Systems: iOS, Android, Sailfish, BlackBerry, BREW, Java, Windows Phone OS, Windows Phone, Windows CE, Windows NT, Symbian, webOS

Usage Examples:

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

// Chrome version extraction
const chromeMd = new MobileDetect('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36');
console.log(chromeMd.version('Chrome'));    // 91.0
console.log(chromeMd.versionStr('Chrome')); // '91.0.4472.124'

// iOS version
const iosMd = new MobileDetect('Mozilla/5.0 (iPhone; CPU iPhone OS 14_6 like Mac OS X)');
console.log(iosMd.version('iOS'));    // 14.6
console.log(iosMd.versionStr('iOS')); // '14_6'

// Android version
const androidMd = new MobileDetect('Mozilla/5.0 (Linux; Android 11; SM-G991B)');
console.log(androidMd.version('Android'));    // 11
console.log(androidMd.versionStr('Android')); // '11'

// WebKit version
console.log(chromeMd.version('Webkit'));    // 537.36
console.log(chromeMd.versionStr('Webkit')); // '537.36'

// Missing version
console.log(chromeMd.version('Firefox'));    // NaN
console.log(chromeMd.versionStr('Firefox')); // null

Device Testing

Test for specific device types, operating systems, or browser characteristics.

/**
 * Global test key against userAgent, os, phone, tablet and some other properties
 * @param key - The key (case-insensitive) to test for
 * @returns true when the key matches any detected property, false otherwise
 */
is(key: string): boolean;

Testable Keys:

  • Device Types: All phone names (iPhone, Samsung, HTC, etc.), tablet names (iPad, Nexus, etc.)
  • Operating Systems: iOS, Android, Windows, BlackBerry, etc.
  • Browsers: Chrome, Firefox, Safari, Opera, Edge, IE, etc.
  • Special Categories: Bot, MobileBot, DesktopMode, TV, WebKit, Console, Watch

Usage Examples:

const md = new MobileDetect('Mozilla/5.0 (iPhone; CPU iPhone OS 14_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.1 Mobile/15E148 Safari/604.1');

// Device testing
console.log(md.is('iPhone'));  // true
console.log(md.is('iPad'));    // false
console.log(md.is('Samsung')); // false

// OS testing  
console.log(md.is('iOS'));     // true
console.log(md.is('Android')); // false

// Browser testing
console.log(md.is('Safari'));  // true
console.log(md.is('Chrome'));  // false
console.log(md.is('WebKit'));  // true

// Special categories
console.log(md.is('Bot'));     // false
console.log(md.is('Mobile'));  // true (general mobile detection)

// Case insensitive
console.log(md.is('iphone'));  // true
console.log(md.is('SAFARI'));  // true

Pattern Matching

Test User-Agent string against custom patterns using string or regex.

/**
 * Do a quick test against navigator::userAgent
 * @param pattern - The pattern, either as String or RegExp (string converted to case-insensitive RegExp)
 * @returns true when the pattern matches, false otherwise
 */
match(pattern: string | RegExp): boolean;

Usage Examples:

const md = new MobileDetect('Mozilla/5.0 (iPhone; CPU iPhone OS 14_6 like Mac OS X) AppleWebKit/605.1.15');

// String pattern (converted to case-insensitive regex)
console.log(md.match('iPhone'));           // true
console.log(md.match('android'));          // false
console.log(md.match('webkit'));           // true

// Multiple patterns with OR
console.log(md.match('iPhone|Android'));   // true
console.log(md.match('Android|Windows'));  // false

// Custom regex pattern
console.log(md.match(/iPhone/i));          // true
console.log(md.match(/OS \d+_\d+/));      // true (matches "OS 14_6")
console.log(md.match(/Chrome\/\d+/));     // false

// Gaming console detection
const consoleMd = new MobileDetect('Mozilla/5.0 (PlayStation 4 5.05)');
console.log(consoleMd.match('playstation|xbox|nintendo')); // true

Mobile Grade Classification

Returns the mobile device capability grade (mostly historical, returns 'A' for modern devices).

/**
 * Returns the mobile grade ('A', 'B', 'C')
 * @returns One of the mobile grades ('A', 'B', 'C')
 */
mobileGrade(): string;

Grade Meanings:

  • Grade A: Full support (modern smartphones and tablets)
  • Grade B: Enhanced support (older capable devices)
  • Grade C: Basic support (very old or limited devices)

Usage Examples:

// Modern devices typically return 'A'
const modernMd = new MobileDetect('Mozilla/5.0 (iPhone; CPU iPhone OS 14_6 like Mac OS X)');
console.log(modernMd.mobileGrade()); // 'A'

const androidMd = new MobileDetect('Mozilla/5.0 (Linux; Android 11; SM-G991B)');
console.log(androidMd.mobileGrade()); // 'A'

// Older devices might return 'B' or 'C'
const oldMd = new MobileDetect('Mozilla/5.0 (SymbianOS/9.1; U; en-us) AppleWebKit/413');
console.log(oldMd.mobileGrade()); // 'B' or 'C'

Static Properties and Methods

/**
 * Library version string including version number and build date
 * Format: "<version> <build-date>"
 */
MobileDetect.version: string; // "1.4.5 2021-03-13"

/**
 * Static version of isPhoneSized method for current screen size detection
 * @param maxPhoneWidth - Maximum logical pixels to be considered as phone (default: 600)
 * @returns true if current screen width <= maxPhoneWidth, false otherwise,
 *          undefined in server-side environments (no window.screen access),
 *          undefined if maxPhoneWidth < 0
 */
static isPhoneSized(maxPhoneWidth?: number): boolean | undefined;

/**
 * Internal implementation object containing detection rules and methods
 * Warning: This is for extensibility/monkey-patching only. Methods and structure
 * may change between versions. Not recommended for production use.
 */
static _impl: MobileDetectImpl;

Usage Examples:

// Library version
console.log(MobileDetect.version); // "1.4.5 2021-03-13"

// Static screen size testing (browser only)
console.log(MobileDetect.isPhoneSized(600)); // true/false/undefined
console.log(MobileDetect.isPhoneSized(480)); // true/false/undefined

// Server-side (always undefined)
console.log(MobileDetect.isPhoneSized()); // undefined

Advanced Usage Patterns

Comprehensive Device Analysis

const md = new MobileDetect(navigator.userAgent);

// Complete device profile
const deviceProfile = {
  isMobile: !!md.mobile(),
  deviceType: md.phone() ? 'phone' : md.tablet() ? 'tablet' : 'desktop',
  manufacturer: md.mobile() || 'Unknown',
  os: md.os(),
  browser: md.userAgent(),
  browsers: md.userAgents(),
  grade: md.mobileGrade(),
  versions: {
    os: md.versionStr(md.os()),
    browser: md.versionStr(md.userAgent()),
    webkit: md.versionStr('Webkit')
  }
};

console.log(deviceProfile);

Feature Detection Based on Capabilities

const md = new MobileDetect(navigator.userAgent);

// Touch interface detection
const hasTouch = md.is('Mobile') || md.is('Tablet');

// High-DPI screen likely
const hasRetinaScreen = md.is('iPhone') || md.is('iPad') || 
  (md.is('Android') && md.version('Android') >= 4);

// WebKit-based optimizations
const isWebKit = md.userAgents().includes('Webkit');

// iOS-specific features
const supportsIOSFeatures = md.is('iOS') && md.version('iOS') >= 13;

User Experience Optimization

const md = new MobileDetect(navigator.userAgent);

// Responsive breakpoint logic
const isPhoneSized = md.isPhoneSized(768); // Custom phone threshold
const prefersMobile = md.is('Mobile') && isPhoneSized;

// Performance optimization
const isLowEndDevice = md.mobileGrade() === 'C' || 
  (md.is('Android') && md.version('Android') < 5);

// Browser-specific polyfills
const needsPolyfills = md.is('IE') || 
  (md.is('Android') && md.version('Android') < 4.4);

Implementation Notes

  • Caching: All methods cache results for performance on repeated calls
  • Case Sensitivity: is() method is case-insensitive, match() respects regex flags
  • Version Parsing: version() converts to number, versionStr() returns raw string
  • Pattern Updates: Detection patterns require regular updates for new devices
  • Grade Accuracy: mobileGrade() is largely outdated, most modern devices return 'A'

docs

device-detection.md

index.md

system-information.md

version-testing.md

tile.json