How to Detect a Mobile Device in jQuery

If we want to search for a particular user, a list of JavaScript syntaxes is given below that can be used to identify different mobile devices such as iPod, iPad, Android, Blackberry, Windows Phone and WebOS etc.

Syntax

/**
 * jQuery.browser.mobile (http://detectmobilebrowser.com/)
 * jQuery.browser.mobile returns true if the browser act as a mobile device
 **/
(function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lgpalm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|e-|e/|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(-|2|g)|yas-|your|zeto|zte-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);

A Basic example

Here, we have the most basic code to detect the mobile phone using jQuery.

if (jQuery.browser.mobile)
{
	console.log("You're using a cellular device!");
}
else
{
	console.log("You're not using a cellular device!");
}

Supportive Browsers

The syntaxes mentioned above and code support the following browsers:

Safari
Google Chrome
Mozilla Firefox
Microsoft Edge
Opera

Now, we are going to define the different syntactical logics for detecting various types of mobile phone.

For Detecting iPhone

You can search the iPhone with the help of following JavaScript code.

var isiPhone = / iphone/i.test(navigator.userAgent.toLowerCase());
 if (isiPhone)
{
	//... code block
}

For Detecting iPod

A JavaScript code is given below to detect the iPod.

var isiPod = / ipod/i.test(navigator.userAgent.toLowerCase());
 if (isiPod)
{
	//… code block
}

For Detecting iPad

Here, we have an illustration for detecting the iPad.

var isiPad = / ipad/i.test(navigator.userAgent.toLowerCase());
 if (isiPad)
{
	//… Statement
}

For Detecting Android Phone

You can detect the Android Phone with the help of following JavaScript code.

var isAndroid = / Android/i.test(navigator.userAgent.toLowerCase());
 if (isAndroid)
{
	//… Executable code
}

For Detecting the Blackberry Phone

You can detect the Blackberry Phone with the help of following JavaScript code.

var isBlackberry = / blackberry/i.test(navigator.userAgent.toLowerCase());
 if (isBlackberry)
{
	//… code statement
}

For Detecting the iDevices

You can search for the iDevices with the help of following JavaScript code.

var isiDevice = / iPod| iPad| iPhone/i.test(navigator.userAgent.toLowerCase());
 if (isiDevice)
{
	//… code statement
}

For Detecting the Windows Phone

You can search for the Windows phone with the help of below-given JavaScript code.

var isWindowsPhone = / windows phone/i.test(navigator.userAgent.toLowerCase());
 if (iswindowphone)
{
	//… code statement
}

For Detecting the WebOs

You can detect the WebOs with the help of below-mentioned JavaScript code.

var isWiebOs = / webos/i.test(navigator.userAgent.toLowerCase());
 if (isWebOs)
{
	//… code block
}

Here, we also have another method to detect the mobile phone with the help of window.matchmedia() method.

You can also use the JS window.matchMedia() method for searching a cellular device according to the CSS media query. It is the best and easiest approach to predict the mobile device.

Syntax

Example 1: Example code for desktop.

<!DOCTYPE html>
<html lang="en">
<head>
<title> jQuery Detect Mobile Device </title>
</head>
<body>
<script>
           if (window.matchMedia("(max-width: 768px)").matches)
           {             // The port of view is less than 768 pixel wide
           document.write("You are using a mobile device.");
           }
else
{           // The port of view is minimum 768 pixels wide
   document.write("You are using a tablet or desktop.");
           }
</script>
</body>
</html> 

Output

You will obtained the following result after the efficient execution of the above code.

Example 2: Example code for the mobile phone.

<!DOCTYPE html>
<html lang="en">
<head>
<title> jQuery Detect Mobile Device </title>
</head>
<body>
<script> 
        if (window.matchMedia("(max-width: 767px)").matches) 
        {                                         // The port of view is smaller than 768 pixels wide 
          document.write("You are using a mobile device."); 
        } 
else 
{                                                 // The port of view is minimum have 768 pixels wide
document.write("You are using a tablet or desktop."); 
        } 
</script>
</body>
</html> 

Output

You will get the following outcome after the successful implementation of the above code.