3 ways to detect mobile device in jQuery

When working with magento, I usually meet the problem with mobile device. The thing is there are some javascript need to run different in mobile device and I don’t know my extension will be install in desktop theme or mobile theme and which device it is working in. So I found the very good way to detect the device and hope it will save you a little time with 3 ways to detect mobile device in jQuery.

Detect Mobile Using jQuery

1. Detect Mobile Device with simple javascript

Even though your code don’t include jQuery, you still have chance to detect mobile device with very simple code

[code language=”javascript”]
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// You are in mobile browser

or you can combine them both to make it more accessible through jQuery…

[code language=”javascript”]
$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));[/code]

2. isMobile function

For the code reuse later on you can use this object, you can save it as a js file for your source code library

[code language=”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());

As you see, it ‘s quite simple to use

[code language=”javascript”]
if(isMobile.any()) {
// It is mobile

3. TouchEvent to detect mobile device

Maybe the simplest way to detect mobile device is not base on the browser name but base on the event what browser support. Let ‘s use these code line to figure out

[code language=”javascript”]
function isMobile() {
try{ document.createEvent("TouchEvent"); return true; }
catch(e){ return false; }

I am pretty sure you knew how to use it, unless just leave me a comment.

References: http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-handheld-device-in-jquery






11 responses to “3 ways to detect mobile device in jQuery”

  1. Philip Avatar

    The second way is the best I think so, it work for my project by jquery mobile. But I am wondering if it catch all of situations?

  2. magentohostsolution Avatar

    Yes, Philip. I used it for many mobile projects and all of them work very smooth.

  3. Philip Avatar

    Thanks, it save my time. Do you have the magento development service?

  4. Jenifer Avatar

    It ‘s quite easy to do this work, thanks for a great tips to detect mobile browser. Do you make it as PHP lib?

  5. magentohostsolution Avatar

    It ‘s too simple, you can add it as your PHP lib as you want

  6. Fernando Avatar

    Thank you so much!

  7. Ken Jones Avatar

    Another device detection tool based on WURFL is now available. ImageEngine for Magento. It automatically resizes your images for mobile devices and delivers them fast via a smart image CDN. https://www.scientiamobile.com/page/imageengine-for-magento-smart-image-cdn

  8. Rob Marrenda Avatar
    Rob Marrenda

    Option 3 is nice, NOT. What you think will happen with a nice eg >23Inch touchscreen … or am I missing some.