How to detect a mobile device using jQuery

javascript

mobile-detection

responsive-design

javascript-features

byNikita Barsukov·Nov 12, 2024

To quickly and broadly detect mobile devices in jQuery, you could use the following snippet:

var mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
var isMobile = mobileRegex.test(navigator.userAgent);
if (isMobile) {
   // Congrats, you're probably on a mobile device. Time to get that CSS in shape!
} else {
   // Pssst... You're probably not on a mobile device. Go wild with CSS!
}

This regular expression tackles a wide variety of mobile platforms. Tailoring functionality or layout becomes easier with this setup, while leaving the complexity at the door.

Progressive feature detection

Feature detection over navigator.userAgent should be your shining beacon. Building upon this is like laying a concrete foundation that won't shake every time a new browser or device comes to town.

Consider media queries in JavaScript with window.matchMedia for programmatic screen size detection:

if (window.matchMedia("only screen and (max-width: 760px)").matches) {
   // No more space, must be mobile
}

Single tap users

Touch vs click, a timeless showdown. Adding another layer to our mobile detection, we can check for the ontouchstart event:

var canTouch = ('ontouchstart' in document.documentElement);

But be cautious, your sneaky friend with a touchscreen laptop might fool this detective!

Wave goodbye to $.browser

$.browser had its prime, but alas, it infamously relied on collectible yet unreliable user agent sniffing. If you're on legacy lands, somewhat stranded, try the jQuery Migrate plugin as your escape helicopter.

Responsive design: not only layout

Responsive design isn't just fitting it all on a smaller screen, it's optimizing performance and enhancing interaction based on device capabilities. Don't forget jQuery can join forces with your CSS media queries.

Lean on vanilla JavaScript

Without a compelling reason to depend on jQuery, using plain JavaScript becomes the sleek alternative for mobile detection. Light as a feather and no dependencies in sight!

Server-side backup

For heavy duty and precision, server-side detection scripts or packages can be your golden guns. They pack a punch by accessing detailed device information.

Standing on giant libraries

When hardcore UserAgent detection is needed, you can depend on libraries like detectmobilebrowsers.com or mobile-detect on npm. Updated and thorough scripts stand ready to identify user devices and browsers with sharp precision.

Putting into action

Now, let's dive into some use cases where you might find mobile detection super handy:

Making functions adaptive

When certain features play hide and seek with mobile browsers, the isMobile check can be the flashlight, allowing you to offer fallback methods for our mobile comrades.

Load times: Keep it light

Bandwidth cap, huge image, heavy plugin? Time to transition to lightweight alternatives for our mobile users. Swoosh goes the slow website complaint!

Touch it like you mean it

Creating a more interactive experience for your touch screen users? Transmute hover states into touch events. Who needs a mouse when you've got fingers?

explain-codes / Javascript / How to detect a mobile device using jQuery

Linked

Detecting a mobile browser



How to detect a mobile device with JavaScript?



What's the best way to detect a 'touch screen' device using JavaScript?



Detect a finger swipe through JavaScript on the iPhone and Android



Detect if device is iOS

