How to detect a device using the device.js library

How to detect a device using JavaScript

Sometimes we have to execute the logic in the application based on the device type, device orientation (portrait/landscape), or operating systems. In this article, we will see how to detect a device using the device.js library.

There are a number of methods to detect a device type in JavaScript. The shortest method is to use navigator.userAgent. A simple method to detect any browser using JavaScript is explained here.

In this article, we will see how to use Device.js – (a Javascript library for device detection).

Device.js – Current Device

Device.js is a JavaScript-based library that is used to write CSS and JavaScript conditions on device operating system (e.g. iOS, Android, Blackberry, Windows, macOS, Firefox OS, MeeGo, AppleTV, etc), orientation (portrait, landscape), and type (desktop, tablet, mobile). The main purpose of this library is to detect a device.

The library also inserts the CSS classes on the <html> dom.

For example:

insert-device-type

Devices and OS supported by device.js

The device.js supports the following devices and operating systems:

  • iOS: iPhone, iPod, iPad
  • macOS: MacBook, AirBook, iMac
  • Android: Phones & Tablets
  • Blackberry: Phones & Tablets
  • Windows: Phones & Tablets
  • Firefox OS: Phones & Tablets

How to use device.js

The device.js comes with an npm package and as well as a CDN link.

1. NPM Package

Open the terminal and execute the following command:

npm install current-device

Now open the JS file and import the package as below:

// using es modules
import device from "current-device";

// common.js
const device = require("current-device").default;

2. CDN Installation

The library is available as a CDN link:

<script src="https://unpkg.com/current-device/umd/current-device.min.js"></script>

To check the device:

console.log("Device:", device.type);

The full working code is:

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Detect Device</title>
</head>
<body>
	<script src="https://unpkg.com/current-device/umd/current-device.min.js"></script>
	<script type="text/javascript">
		// check device
		console.log("Device:", device.type);

		// check orientation
		console.log("Orientation:", device.orientation);

		// check operating system
		console.log("OS:", device.os);
	</script>
</body>
</html>

The device.js also supports device orientation conditions. We can apply the conditions as:

<script type="text/javascript">
	if(device.landscape()){
		console.log("The device is Landscape");
	}
	else if(device.portrait()){
		console.log("The device is Portrait");
	}
</script>

Properties

JS PropertyReturns
device.type‘mobile’, ‘tablet’, ‘desktop’, or ‘unknown’
device.orientation‘landscape’, ‘portrait’, or ‘unknown’
device.os‘ios’, ‘iphone’, ‘ipad’, ‘ipod’, ‘android’, ‘blackberry’, ‘windows’, ‘macos’, ‘fxos’, ‘meego’, ‘television’, or ‘unknown’
Reference: Current Device

Methods

DeviceJavaScript Method
Mobiledevice.mobile()
Tabletdevice.tablet()
Desktopdevice.desktop()
iOSdevice.ios()
iPaddevice.ipad()
iPhonedevice.iphone()
iPoddevice.ipod()
Androiddevice.android()
Android Phonedevice.androidPhone()
Android Tabletdevice.androidTablet()
BlackBerrydevice.blackberry()
BlackBerry Phonedevice.blackberryPhone()
BlackBerry Tabletdevice.blackberryTablet()
Windowsdevice.windows()
Windows Phonedevice.windowsPhone()
Windows Tabletdevice.windowsTablet()
Firefox OSdevice.fxos()
Firefox OS Phonedevice.fxosPhone()
Firefox OS Tabletdevice.fxosTablet()
MeeGodevice.meego()
Televisiondevice.television()
Reference: Current Device

More to read

Related Posts