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:
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 Property | Returns |
|---|---|
| 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’ |
Methods
| Device | JavaScript Method |
|---|---|
| Mobile | device.mobile() |
| Tablet | device.tablet() |
| Desktop | device.desktop() |
| iOS | device.ios() |
| iPad | device.ipad() |
| iPhone | device.iphone() |
| iPod | device.ipod() |
| Android | device.android() |
| Android Phone | device.androidPhone() |
| Android Tablet | device.androidTablet() |
| BlackBerry | device.blackberry() |
| BlackBerry Phone | device.blackberryPhone() |
| BlackBerry Tablet | device.blackberryTablet() |
| Windows | device.windows() |
| Windows Phone | device.windowsPhone() |
| Windows Tablet | device.windowsTablet() |
| Firefox OS | device.fxos() |
| Firefox OS Phone | device.fxosPhone() |
| Firefox OS Tablet | device.fxosTablet() |
| MeeGo | device.meego() |
| Television | device.television() |
