While I understand and value the concept of feature detection over browser detection, sometimes the need for knowing whether or not we’re dealing with a mobile device arises. For in-depth device checking, you can rely on a complex library such as The MobileESP Project. But for simpler applications, the following snippet can be useful.
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());
}
};
While this doesn’t account for all mobile platforms, it will pick up the most popular ones out there.
Examples
To check to see if the user is on any of the supported mobile devices:
if( isMobile.any() ) alert('Mobile');
To check to see if the user is on a specific mobile device:
if( isMobile.iOS() ) alert('iOS');
A more sophisticated solution could be Apache Mobile filter. It’s also possible to use a device repository like wurfl or detectright.
Indeed, there are more sophisticated solutions (as mentioned in the post) that should definitely be considered for more serious implementations. However, for things like jQuery plugins that need to deactivate themselves or act differently for a mobile browser, the above snippet will typically be sufficient (and probably more portable).
Great bit of code! Really simple, elegant solution that did the job perfectly.
Great script! Works great. Thanks.
Thanks a lot…works like a charm!
Really cool, deserve some compliments!
Awesome!
Thanks so much! It works great!
Thanks! You saved me a boatload of time. I appreciate it.
Awesome…works for me :) Thank you!
Works great. Nice, clean, easy to read code! Thanks for the example.
Hi! We just wanted to say thank you for this really handy post, you helped us out of a tight spot. Thanks again!
Yep, this seems to work. I haven’t done extensive testing but works in iOS so far.
Great work, thank you very much.
Thanks :)
Compliment: Elegant, simple and just what I was looking for. Thank you for posting it!
Thank you! Searched for exactly that to just change the
onclickhandler to aontouchhandler for mobile devices to get rid of the 300ms delay.Thomas, you might want to consider checking for touch support this way instead:
Thank you! Nice JS “snippet” :)
FYI: for the new generation Blackberry Z10 (running BB10), you can modify the “BlackBerry” function by adding:
After the initial check. The new userAgent strings don’t contain the word “BlackBerry” in them (though they do include the phrase “AppleWebKit”).
What’s the code to differentiate between iPad and iPad retina?
How about detection for the Kindle or game browsers (Wii, XBox)?
This is exactly what i was looking for. Im not the best developer so simple stuff like this is what i use.