How to detect a mobile device using jQuery ?

To detect a mobile device using jQuery (or plain JavaScript), you can check the user agent string for common mobile device keywords. While user agent detection isn’t foolproof (due to spoofing or evolving device types), it’s widely used for basic checks. Here’s how to do it:

1. Basic Mobile Detection Function

// Check if the device is mobile/tablet
function isMobileDevice() {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent || navigator.vendor || window.opera
  );
}

// Example usage
if (isMobileDevice()) {
  console.log("Mobile/Tablet detected!");
} else {
  console.log("Desktop detected.");
}

2. jQuery Integration

Wrap the check in a jQuery helper function for reusability:

// Extend jQuery with a mobile detection method
$.isMobile = function() {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  );
};

// Usage
if ($.isMobile()) {
  $("body").addClass("mobile-layout");
}

3. Advanced: Combine with Feature Detection

For better accuracy, combine user agent checks with touch support or screen size:

function isMobile() {
  // Check user agent AND touch support
  const isMobileUA = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  );
  const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
  return isMobileUA && hasTouch;
}

4. Example: Redirect Mobile Users

$(document).ready(function() {
  if ($.isMobile()) {
    window.location.href = "/mobile"; // Redirect to mobile site
  }
});

Key Notes

• Limitations: User agent strings can be spoofed (e.g., desktop browsers in mobile emulation mode).
• Tablets: The regex includes iPad—adjust if you want to treat tablets separately.
• Modern Approach: For responsive design, prefer CSS media queries (e.g., @media (max-width: 768px)) when possible.

Alternatives

• CSS Media Queries: For responsive layouts (recommended for styling).
• Window Width: Detect small screens (not always reliable):

  const isSmallScreen = window.innerWidth <= 768;

Use this method for basic device detection, but always pair it with feature testing (e.g., touch support) for robustness.