May
14
2011

Super simple Javascript User Agent detection

I recently had the need to detect some mobile User Agents. If you’re not familiar with the topic, a User Agent is a piece of information that’s in every browser, desktop or mobile, which basically gives some data about it’s vendor and version. So you would be able to tell if a site visitor was using Firefox 4, Internet Explorer 8, or was on an iPhone for example. There are some very robust and complex ways of doing this, but in my case, I wanted less features, and super simple usability.

Here was the scenario. A 3rd party vendor had a deal with my company. They gave us a script which does some ad targeting, but it was specifically only intended for Android, iPhone, and iPad users. We are very conscious of load time, and not passing on the burden of loading a hefty chunk of javascript to users when we don’t have to. So determining if they are on one of the 3 mentioned device types before serving anything was the way to go. Long story short, I wrote a little chunk of code for this exact purpose, which I think is about as small as I could do it. This would live in an external javascript file:

1
2
3
4
5
6
7
8
9
10
11
function mobileDetect() {
    var userAgentStr = navigator.userAgent.toLowerCase(); // get the userAgent
    var isMobile = null;
    for (var i = 0; i < arguments.length; i++) { // loop through each argument
        if (userAgentStr.search(arguments[i].toLowerCase()) >= 0) { // .search returns -1 if no result, so >= 0 means it was found
            isMobile = true;
            break; // end the loop when a match is found
        }
    }
    return isMobile;
}

Then, to actually use it, paste this into the portion of your site that would need to be loading, or running the targeted javascript:

1
2
3
4
5
6
<script type="text/javascript">
    if (mobileDetect('iphone','ipad','android','etc.')) {
        //execute code below, but only if mobile userAgent is detected
        alert("do something");
    }
</script>

That’s about it. You can see that it will take an unlimited number of arguments (User Agents), so it’s pretty flexible. This isn’t meant to be a full featured mobile browser detection system, just a reusable and most importantly, super simple script which you can use from time to time for a little dynamic script loading. In the end, I used my version to actually write out the 3rd party script tags as well, like so:

1
2
3
4
5
6
<script type="text/javascript">
    if (mobileDetect('iphone','ipad','android','etc.')) {
        //execute code below, but only if mobile userAgent is detected
        document.write(unescape("%3Cscript src='http://site.com/script.js' %3E%3C/script%3E"));
    }
</script>

I’ll be the first to tell you, I’m not a javascript expert by any means. If you think you can do this better, I’d love to know. Please drop it in a comment!

Related Posts

About the Author:

I like technology, sci-fi, fantasy, and anime. You know, cool geeky stuff.

Leave a comment