A simple JS library that detects mobile devices.
Big thanks to Igor Ribeio Lima for his contributions.
I had a specific requirement for a project when I created this:
- Redirect all iPhones, iPods, Android phones, and seven inch devices to the mobile site.
A completely separate site had been created for mobile devices, so feature detection/graceful degredation/progressive enhancement were out of the question. I had to redirect.
I couldn't do detection on the back-end, because the entire site was cached and served by Akamai; I had to do the detection client-side.
So I resorted to UA sniffing.
I tried to keep the script small (currently ~740 bytes, minified) and simple, because it would need to execute in the <head>, which is generally a bad idea, since JS blocks downloading and rendering of anything else while it parses and executes. In the case of mobile redirection, I don't mind so much, because I want to start the redirect as soon as possible, before the device has a chance to start downloading and rendering stuff. For non-mobile platforms, the script should execute fast, so the browser can quickly get back to downloading and rendering.
isMobile runs quickly on page load to detect mobile devices; it then creates a JavaScript object with the results.
The following properies of the isMobile object will either be true or false
isMobile.apple.phoneisMobile.apple.ipodisMobile.apple.tabletisMobile.apple.device(any mobile Apple device)
isMobile.android.phoneisMobile.android.tabletisMobile.android.device(any mobile Android device)
isMobile.windows.phoneisMobile.windows.tabletisMobile.windows.device(any mobile Windows device)
isMobile.seven_inchtrueif the device is one of the following 7" devices:- Nexus 7
- Kindle Fire
- Nook Tablet 7 inch
- Galaxy Tab 7 inch
isMobile.other_blackberryisMobile.other_opera(Opera Mini)isMobile.other_firefox
isMobile.any- any device matchedisMobile.phone- any device in the 'phone' groups aboveisMobile.tablet- any device in the 'tablet' groups above
I include the minified version of the script, inline, and at the top of the <head>. Cellular connections tend to suck, so it would be wasteful overhead to open another connection, just to download <1kb of JS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
// Minified version of isMobile included in the HTML since it's <1kb
(function(i){var e=/iPhone/i,n=/iPod/i,o=/iPad/i,t=/(?=.*\bAndroid\b)(?=.*\bMobile\b)/i,r=/Android/i,d=/BlackBerry/i,s=/Opera Mini/i,a=/IEMobile/i,b=/(?=.*\bFirefox\b)(?=.*\bMobile\b)/i,h=RegExp("(?:Nexus 7|BNTV250|Kindle Fire|Silk|GT-P1000)","i"),c=function(i,e){return i.test(e)},l=function(i){var l=i||navigator.userAgent;this.apple={phone:c(e,l),ipod:c(n,l),tablet:c(o,l),device:c(e,l)||c(n,l)||c(o,l)},this.android={phone:c(t,l),tablet:!c(t,l)&&c(r,l),device:c(t,l)||c(r,l)},this.other={blackberry:c(d,l),opera:c(s,l),windows:c(a,l),firefox:c(b,l),device:c(d,l)||c(s,l)||c(a,l)||c(b,l)},this.seven_inch=c(h,l),this.any=this.apple.device||this.android.device||this.other.device||this.seven_inch},v=i.isMobile=new l;v.Class=l})(window);
// My own arbitrary use of isMobile, as an example
(function () {
var MOBILE_SITE = '/mobile/index.html', // site to redirect to
NO_REDIRECT = 'noredirect'; // cookie to prevent redirect
// I only want to redirect iPhones, Android phones and a handful of 7" devices
if (isMobile.apple.phone || isMobile.android.phone || isMobile.seven_inch) {
// Only redirect if the user didn't previously choose
// to explicitly view the full site. This is validated
// by checking if a "noredirect" cookie exists
if ( document.cookie.indexOf(NO_REDIRECT) === -1 ) {
document.location = MOBILE_SITE;
}
}
})();
</script>
</head>
<body>
<!-- imagine lots of html and content -->
</body>
</html>