@browserless/devices: A collection of different devices for emulation purposes.

See devices section our website for more information.

Install

Using npm:

npm install @browserless/devices --save

About

This package provides a device descriptor library for browser emulation. It extends Puppeteer's built-in device list with additional desktop devices and provides fuzzy matching capabilities for device name resolution.

What this package does

The @browserless/devices package allows you to:

• Emulate devices by retrieving viewport dimensions, user agent strings, and device capabilities
• Use fuzzy matching to resolve device names even with typos or case variations
• Access extended device list that includes desktop devices missing from Puppeteer's defaults

Device properties

Each device descriptor includes:

| Property | Description | |----------|-------------| | userAgent | Browser user agent string | | viewport.width | Screen width in pixels | | viewport.height | Screen height in pixels | | viewport.deviceScaleFactor | Device pixel ratio (DPR) | | viewport.isMobile | Whether it's a mobile device | | viewport.hasTouch | Whether the device has touch support | | viewport.isLandscape | Whether the device is in landscape mode |

Custom Devices

This package extends Puppeteer's KnownDevices with additional desktop devices:

| Device | Resolution | Scale | |--------|------------|-------| | Macbook Pro 13 | 1280 × 800 | 2x | | Macbook Pro 15 | 1440 × 900 | 2x | | Macbook Pro 16 | 1536 × 960 | 2x | | iMac 21 | 1980 × 1080 | 1x | | iMac 21 4K | 2048 × 1152 | 2x | | iMac 24 4.5K | 4480 × 2520 | 1x | | iMac 27 | 2560 × 1440 | 1x | | iMac 27 5K | 2560 × 1440 | 2x |

Fuzzy Device Name Matching

When lossyDeviceName is enabled (default), the package uses fuzzy matching to resolve device names:

const createGetDevice = require('@browserless/devices')
const getDevice = createGetDevice({ lossyDeviceName: true })

// All of these resolve to "Macbook Pro 13"
getDevice({ device: 'Macbook Pro 13' })
getDevice({ device: 'macbook pro 13' })
getDevice({ device: 'MACBOOK PRO 13' })
getDevice({ device: 'macbook pro' })
getDevice({ device: 'macboo pro' })  // typo still works!

Usage

const createGetDevice = require('@browserless/devices')
const getDevice = createGetDevice()

// Get device by name
const device = getDevice({ device: 'iPhone 13' })
// => { userAgent: '...', viewport: { width: 390, height: 844, ... } }

// Override viewport properties
const customDevice = getDevice({
  device: 'iPad',
  viewport: { isLandscape: true }
})

// Use custom headers
const withHeaders = getDevice({
  headers: { 'user-agent': 'googlebot' }
})

// Access all available devices
console.log(getDevice.deviceDescriptors)

How it fits in the monorepo

This is a standalone utility package with no dependencies on other @browserless/* packages. It's used by:

| Consumer | Purpose | |----------|---------| | @browserless/goto | Sets viewport and user agent when navigating to URLs | | browserless (core) | Exposes getDevice() method on browser contexts |

Dependencies

| Package | Purpose | |---------|---------| | didyoumean3 | Fuzzy string matching for lossy device name resolution | | memoize-one | Caches device lookups for performance | | require-one-of | Auto-detects puppeteer/puppeteer-core installation |

License

@browserless/devices © Microlink, released under the MIT License. Authored and maintained by Microlink with help from contributors.

The logo has been designed by xinh studio.

microlink.io · GitHub microlinkhq · X @microlinkhq