[Solved-5 Solutions] Best way to detect a mobile device - javascript tutorial


What is the best way to detect a mobile device in jQuery ?

Solution 1:

To detect mobile device is simple in javascript instead of using jquery.

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..

Using jQuery is more accessible.

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

Now $.browser will return "device" for all above devices.

Note: $.browser removed on jQuery v1.9.1. But you can use this by using jQuery migration plugin Code

Solution 2:

Using CSS file:

/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
  #some-element { display: none; }

In jQuery/Javascript file:

$( document ).ready(function() {      
    var is_mobile = false;

    if( $('#some-element').css('display')=='none') {
        is_mobile = true;       

    // now i can use is_mobile to run javascript conditionally

    if (is_mobile == true) {
        //Conditional script here
  • Depending on the screen size to do show/hide elements by using CSS Media Queries.
  • For example, In mobile version we don't want to activate the Facebook Like Box, because it loads all those profile images and stuff.
  • It is not useful for mobile visitors. So, besides hiding the container element, an inside the jQuery code block:
if(!is_mobile) {
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=210731252294735";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

Solution 3:

This code is simple and effective.

function isMobile() { return ('ontouchstart' in document.documentElement); }

It doesn't take into account the case for laptops with touchscreen.

function isMobile() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }

Solution 4:

It is desired to know which brand device a client is using in order to show content specific to that device, like a link to the iPhone store or the Android market. It Only shows browser capabilities, like HTML5, or Flash.

Here UserAgent solution in jQuery to display a different class for each device type:

/*** sniff the UA of the client and show hidden div's for that device ***/
var customizeForDevice = function(){
    var ua = navigator.userAgent;
    var checker = {
      iphone: ua.match(/(iPhone|iPod|iPad)/),
      blackberry: ua.match(/BlackBerry/),
      android: ua.match(/Android/)
    if (checker.android){
    else if (checker.iphone){
    else if (checker.blackberry){
    else {

Solution 5:

The string “Mobi” anywhere in the User Agent to detect a mobile device.
Using this code.

if (/Mobi/.test(navigator.userAgent)) {
    // mobile!

This will match all common mobile browser like mobile Mozilla, Safari, IE, Opera, Chrome, etc.
For Android:

if (/Mobi|Android/i.test(navigator.userAgent)) {
    // mobile!

Related Searches to Best way to detect a mobile device - javascript tutorial