or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

browser-detection.mdcompatibility-testing.mdengine-detection.mdindex.mdos-detection.mdparser-creation.mdplatform-detection.md
tile.json

platform-detection.mddocs/

Platform Detection

Methods for identifying device platform types including desktop, mobile, tablet, TV, and bot detection from user agent strings.

Capabilities

Get Platform

Returns complete platform information including type, vendor, and model.

/**
 * Get parsed platform
 * @returns Platform details with type, vendor, and model
 */
getPlatform(): PlatformDetails;

Usage Examples:

const parser = Bowser.getParser(window.navigator.userAgent);

const platform = parser.getPlatform();
console.log(platform);
// { type: "desktop" }
// or
// { type: "mobile", vendor: "Apple", model: "iPhone" }

console.log(platform.type); // "desktop", "mobile", "tablet", "tv", or "bot"
console.log(platform.vendor); // "Apple", "Samsung", etc. (if available)
console.log(platform.model); // "iPhone", "Galaxy S21", etc. (if available)

Get Platform Type

Returns the platform type with optional case conversion.

/**
 * Get platform name
 * @param toLowerCase - Return lower-cased value
 * @returns Platform type string
 */
getPlatformType(toLowerCase?: boolean): string;

Usage Examples:

const parser = Bowser.getParser(window.navigator.userAgent);

console.log(parser.getPlatformType()); // "desktop"
console.log(parser.getPlatformType(true)); // "desktop"
console.log(parser.getPlatformType(false)); // "desktop"

// Different platform types
// "desktop" - Desktop computers
// "mobile" - Mobile phones
// "tablet" - Tablets and large mobile devices
// "tv" - Smart TVs and TV browsers
// "bot" - Web crawlers and bots

Is Platform

Checks if the current platform matches a specific platform type.

/**
 * Check if the platform type equals the passed string
 * @param platformType - The string to compare with the platform type
 * @returns Boolean indicating if the platform matches
 */
isPlatform(platformType: string): boolean;

Usage Examples:

const parser = Bowser.getParser(window.navigator.userAgent);

// Basic platform checking (case-insensitive)
console.log(parser.isPlatform("desktop")); // true (if desktop)
console.log(parser.isPlatform("Desktop")); // true (case-insensitive)
console.log(parser.isPlatform("mobile")); // false (if desktop)

// Conditional logic for responsive design
if (parser.isPlatform("mobile")) {
  console.log("Enable mobile-specific UI");
} else if (parser.isPlatform("tablet")) {
  console.log("Enable tablet-specific UI");
} else if (parser.isPlatform("desktop")) {
  console.log("Enable desktop-specific UI");
}

Parse Platform

Explicitly parses and returns platform information, useful when using lazy parsing.

/**
 * Get parsed platform
 * @returns Platform details with type, vendor, and model
 */
parsePlatform(): PlatformDetails;

Usage Examples:

// With lazy parsing
const parser = Bowser.getParser(window.navigator.userAgent, true);

// Force platform parsing
const platform = parser.parsePlatform();
console.log(platform); // { type: "desktop" }

// Subsequent calls return cached result
const samePlatform = parser.parsePlatform();
console.log(samePlatform === platform); // false (new object, same data)

Common Patterns

Responsive Design

const parser = Bowser.getParser(window.navigator.userAgent);

// Responsive layout decisions
if (parser.isPlatform("mobile")) {
  document.body.classList.add('mobile-layout');
  // Show mobile navigation
  // Enable touch gestures
} else if (parser.isPlatform("tablet")) {
  document.body.classList.add('tablet-layout');
  // Show tablet navigation
  // Enable touch gestures with larger targets
} else if (parser.isPlatform("desktop")) {
  document.body.classList.add('desktop-layout');
  // Show full navigation
  // Enable keyboard shortcuts
}

Feature Detection Based on Platform

const parser = Bowser.getParser(window.navigator.userAgent);
const platform = parser.getPlatform();

// Touch support
const supportsTouch = parser.isPlatform("mobile") || parser.isPlatform("tablet");
if (supportsTouch) {
  console.log("Touch interface available");
  // Enable swipe gestures
  // Adjust button sizes for touch
}

// Device-specific optimizations
if (platform.vendor === "Apple" && platform.model === "iPhone") {
  console.log("iPhone-specific optimizations");
  // Handle iPhone notch
  // Optimize for iOS Safari
}

Bot Detection

const parser = Bowser.getParser(request.headers['user-agent']);

if (parser.isPlatform("bot")) {
  console.log("Search engine crawler detected");
  // Serve SEO-optimized content
  // Skip analytics tracking
  // Enable server-side rendering
}

Smart TV Detection

const parser = Bowser.getParser(window.navigator.userAgent);

if (parser.isPlatform("tv")) {
  console.log("Smart TV browser detected");
  // Show TV-optimized interface
  // Enable remote control navigation
  // Adjust for large screens and viewing distance
}

Platform-specific Media Queries

const parser = Bowser.getParser(window.navigator.userAgent);

// Add platform classes for CSS targeting
if (parser.isPlatform("mobile")) {
  document.documentElement.classList.add('platform-mobile');
} else if (parser.isPlatform("tablet")) {
  document.documentElement.classList.add('platform-tablet');
} else if (parser.isPlatform("desktop")) {
  document.documentElement.classList.add('platform-desktop');
}

Types

interface PlatformDetails {
  type?: string;
  vendor?: string;
  model?: string;
}

Platform Types

Desktop

  • type: "desktop"
  • Description: Traditional desktop and laptop computers
  • Characteristics: Large screens, keyboard/mouse input, full browsers

Mobile

  • type: "mobile"
  • Description: Smartphones and mobile devices
  • Characteristics: Small screens, touch input, mobile browsers
  • Common vendors: Apple, Samsung, Google, Huawei
  • Common models: iPhone, Galaxy, Pixel

Tablet

  • type: "tablet"
  • Description: Tablets and large mobile devices
  • Characteristics: Medium screens, touch input, tablet-optimized browsers
  • Common vendors: Apple, Samsung, Microsoft
  • Common models: iPad, Galaxy Tab, Surface

TV

  • type: "tv"
  • Description: Smart TV browsers and TV-based applications
  • Characteristics: Large screens, remote control input, limited processing
  • Common vendors: Samsung, LG, Roku, PlayStation

Bot

  • type: "bot"
  • Description: Web crawlers, search engine bots, and automated tools
  • Characteristics: No user interface, programmatic access
  • Common bots: Googlebot, Bingbot, various SEO crawlers