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.
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
}
[/code]
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());
}
};[/code]
As you see, it ‘s quite simple to use
[code language=”javascript”]
if(isMobile.any()) {
// It is mobile
}[/code]
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; }
}
[/code]
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
Comments
11 responses to “3 ways to detect mobile device in jQuery”
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?
Yes, Philip. I used it for many mobile projects and all of them work very smooth.
Thanks, it save my time. Do you have the magento development service?
It ‘s quite easy to do this work, thanks for a great tips to detect mobile browser. Do you make it as PHP lib?
It ‘s too simple, you can add it as your PHP lib as you want
Here is also an example of how to use WURFL.js in jQuery: http://www.scientiamobile.com/page/mobile-device-detection-with-wurfl-js-and-jquery
Thank you so much!
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
Option 3 is nice, NOT. What you think will happen with a nice eg >23Inch touchscreen … or am I missing some.
[…] 3 ways to detect mobile device in jQuery […]
[…] http://magentohostsolution.com/3-ways-detect-mobile-device-jquery/ […]