Detect Ipad, tablet or mobile Devices using jQuery

Question

I have one website build using ASP.NET,C# and Jquery. As per requirement I made that site to responsive. Means, site should be open in any resolution like iPad, tablet or mobile as well as desktop and laptop.

But now there is one more requirement like if site is opened in iPad, tablet or mobile view then one div class that I need to give dynamic css style using jquery.

Currently, there is no problem with desktop and laptop resolution. Only problem with mobile, tablet and iPad.

So, What I need to know is How to detect that site is open in Ipad,Tablet or Mobile Device using Jquery ?

This is not Android programming. Ask that in the web section. — Wildcopper, Apr 17 '15 at 11:47
possible duplicate of [What is the best way to detect a mobile device in jQuery?](http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery) — Manuel Allenspach, Apr 17 '15 at 11:49

score 0 · Answer 1 · answered Apr 17 '15 at 11:50

Using a JavaScript Function to Detect Mobile Devices

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

if(isMobile.any()) {
   alert("This is a Mobile Device");
}

Another JavaScript trick to Detect Mobile Devices

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  // tasks to do if it is a Mobile Device
  alert("Mobile Detected");

}

Detect Mobile Browser has a great collection of scripts to Detect Mobile Devices. You can get Mobile Device detection scripts for Apache, ASP, ASP.NET, ColdFusion, C#, IIS, JSP, JavaScript, jQuery, Lasso, nginx, node.js, PHP, Perl, Python, Rails etc

Browser sniffing really is a thing of the past. Feature detection should be the approach... — Shikkediel, Apr 17 '15 at 11:51
Sure, I ain't hating... but I'd think a screen size check, followed by an 'ontouchstart' boolean for the window rules out all but maybe keyboard touchpads. — Shikkediel, Apr 17 '15 at 12:03
@Shikkediel.. I agree!! screen size check can be achieved more of in CSS `@media` queries which is way easy than js.. :) and then I think my answer stands an improper one to achieve those.. :) — Guruprasad J Rao, Apr 17 '15 at 12:05

score 0 · Answer 2 · answered Apr 17 '15 at 15:03

I have created below JavaScript function and create two css classes. 1. Left part 2. Right part

If I found that windows size is <= 768 (Mobile,Tablet or Ipad) in that case I keep html of left side in one variable and then append it in right side part and then clear left side html.

Here, you can check

<script type="text/javascript">
    var tempListing; 
     $(document).ready(function () {
         tempListing = $(".left_side").html(); // Keep HTML in this variable.



         var win = $(this); //this = window 
         if (win.width() <= 768) { //This will check windows resolution means width 
             if (tempListing.trim().length > 0) { 
                 $(".right_side").append(tempListing); 
                 $(".left_side").html(''); 
             } 
         } 
     });

Detect Ipad, tablet or mobile Devices using jQuery

2 Answers2