Is there a reliable way to detect whether users are using mobile devices in jQuery?Is it similar to the CSS @media property?If the browser is on a handheld device, I want to run other scripts.

The jQuery $.browser function is not what I want.

#1st floor

Small is beautiful to me, so I'm using this technology:

In a CSS file:

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

In the 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
    }
 });

My goal is to make my website "mobile friendly".Therefore, I use CSS Media Queries to show/hide elements based on screen size.

For example, in my mobile version, I don't want to activate Facebook Like Box because it loads all these profile images and content.This is not good for mobile visitors.Therefore, in addition to hiding container elements, I do this within the jQuery code block (as described above):

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'));
}

You can do this at On http://lisboaautentica.com See how it works

I'm still working on a mobile version, so as of this writing, it's not as good as it should be.

from dekin88 To update

A JavaScript API is built in to detect media.Instead of using the above solution, just use the following:

$( document ).ready(function() {      
    var isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

    if (isMobile) {
        //Conditional script here
    }
 });

Browser support: http : //caniuse.com/#feat=matchmedia

The advantage of this approach is that it is simpler, shorter and, if necessary, you can conditionally target different devices, such as smartphones and tablets, without adding any virtual elements to the DOM.

#2nd floor

If Move means Small Screen, use the following code:

var windowWidth = window.screen.width < window.outerWidth ?
                  window.screen.width : window.outerWidth;
var mobile = windowWidth < 500;

On your iPhone, your window.screen.width ends up at 320.On Android, your window.outerWidth ends up at 480 (although this may depend on Android).The iPad and Android tablets will return numbers like 768, so they will get the full view they need.

#3rd floor

Solutions were found in the following locations: http : //www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/ .

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

Then, to verify whether it is a mobile device, you can test it using the following methods:

if(isMobile.any()) {
   //some code...
}

#4th floor

If you find that checking only navigator.userAgent is not always reliable.Higher reliability can be achieved by simultaneously checking navigator.platform.Simple changes to previous answers seem better:

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ||
   (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) {
    // some code...
}

#5th floor

You can also detect

$.isIPhone = function(){
    return ((navigator.platform.indexOf("iPhone") != -1) || (navigator.platform.indexOf("iPod") != -1));

};
$.isIPad = function (){
    return (navigator.platform.indexOf("iPad") != -1);
};
$.isAndroidMobile  = function(){
    var ua = navigator.userAgent.toLowerCase();
    return ua.indexOf("android") > -1 && ua.indexOf("mobile");
};
$.isAndroidTablet  = function(){
    var ua = navigator.userAgent.toLowerCase();
    return ua.indexOf("android") > -1 && !(ua.indexOf("mobile"));
};