detect-the-device-in-javascript

How to detect the device in javaScript – Mobile or PC?

In this article, we will see how to detect the device in javaScript. There are many approaches to detect the device like browser agent, user agent, etc.

Use navigator.userAgent

The navigator.userAgent object contains details about your browser and operating system, including which browser and platform you’re using—in theory, enough information to detect a mobile device with reasonable accuracy.

The userAgent property returns a string of data that starts with Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X … ). With some finagling, this can be converted into a Boolean value:

if(navigator.userAgent) {

// Firefox for Android

// Mozilla/5.0 (Android 4.4.2; Tablet; rv:36.0) Gecko/36.0 Firefox/36.0

var isMobile = true;

} else {

// Not Firefox for Android

var isMobile = false;

}

The userAgent property will return either a valid Safari on an iOS device (Safari/525.26), an iOS 6+ Safari, or an iPad running Chrome for iOS (Chrome).

In order to determine if it’s not one of these devices then you must run the following conditional statement:

if((navigator.userAgent) && (navigator.platform != iOS)){

var isPC = true;

} else {

var isPC = false;

}

Use WURFL.js Device Detection Library

WURFL is a new open-source JavaScript that allows you to detect devices like PCs, tablets, and smartphones by accessing HTTP headers directly.

It works today across multiple platforms and provides additional information on operating systems, browsers, and IP addresses.

In this tutorial, I will show you how to use WURFL in your JavaScript code with examples.

Add the following Javascript code first to your page:

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

Once loaded, the snippet will rapidly request ScientiaMobile’s cloud-based WURFL detection service for WURFL device capabilities.
You receive a JSON object. For instance, by evaluating the form factor WURFL capability, you may determine whether a device is a smartphone.

if (WURFL.is_mobile === true && WURFL.form_factor === "Smartphone") {
    // device is a smartphone
}

Alternatively, you can use the complete device name to perform a test for a specific iPhone model. 

if (WURFL.complete_device_name === "Apple iPhone XR") {
    // device name is Apple iPhone XR
}

Read more on WURFL.js here

Use CSS Media Queries

Detecting whether a mobile device is using a CSS media query can help you customize your site’s layout and/or functionality.

There are several tools that can be used for detecting specific devices, as well as detecting mobile devices in general. Find out more about these tools, and how they can be used to detect and respond to different screen sizes on different types of mobile devices.

A Basic Media Queries Example

Including an alternative CSS section right inside your style sheet is one approach to using media queries.

The background color of the container (class) in the example below is changed to red if the viewport is 700px wide or more.

@media screen and (min-width: 700px) {
  .container {
    background-color: red;
  }
}

Add comment