detect-device

Detects the (mobile) device used based on screen dimensions (width+height) and DPI

Usage no npm install needed!

<script type="module">
  import detectDevice from 'https://cdn.skypack.dev/detect-device';
</script>

README

detect-device

Detects (mobile) device used based on screen dimensions (width, height, dppx). Includes list of all devices.

Demo

Open this link on a mobile device. If it couldn't be detected please open a pull request for it.

Install

$ npm install detect-device

Usage

import { detect, devices } = 'detect-devices'

const detectedDevice = detect()
console.log(detectedDevice)
\\ { "name": "Apple iPhone 6", "width": 750, "height": 1334, "diagonal": 4.7, "ppi": 326, "dppx": 2 }

const iPhone5 = detect({
  width: 640,
  height: 1136,
  dppx: 2
})
console.log(iPhone5)
\\ { "name": "Apple iPhone 5", "width": 640, "height": 1136, "diagonal": 4, "ppi": 326, "dppx": 2 }

console.log(devices)
// ... lists all available devices

Device Properties

name

Description of the device. Includes vendor and model.

height

Absolute height of device screen in pixel.

height

Absolute height of device screen in pixel.

diagonal

Diagonal screen size in inch.

frame

Distance between screen and device body in inch. (deviceWidthInInch - screenWidthInInch) / 2 = frame.

ppi

Points per inch. Read more.

dppx

Scaling factor. Sometimes also called "retina".