isMobileDevice and the death of innocence [SPOILERS]

22 Oct 2013

Trying to keep up with the cool kids I spent a little time last night reading through some of the source code of healthcare.gov. Naturally the one thing that caught my attention was a snippet of script which attempts to do mobile device detection from healthcare.gov/js/all.js

// checks screen size
var isMobile = {
    any: function() {
        return($(window).width()<=599);
        // nexus7 width is 600 (window.innerWidth)
        // this will not run any reformatting for the phone layout on nexus
    }
};

// checks device
var isMobileDevice = {
    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 (isMobileDevice.Android() ||
          isMobileDevice.BlackBerry() ||
          isMobileDevice.iOS() ||
          isMobileDevice.Opera() ||
          isMobileDevice.Windows());
    }
};

What’s most interesting to me about this particular chunk of code, other than hard-coding multiple SPOF (MSOPS?!) for your mobile strategy is the fact that variations of this script keep popping up. It’s all over the web.

As far as I can tell this script originates on a blog post from 2011, http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/. And somehow via the magic of copy and paste it ends up in healthcare.gov in 2013.

(Good luck getting that script updated for the thousands of sites and applications, you say to yourself, where it’s laying dormant just waiting to send devices the wrong content based on a UA substring.)

This kind of pattern we see time and time again makes me a little bit sad (blog once, destroy everywhere). Don’t be too hard on yourself if you’ve used this same script though—I’ve been prone to sadness ever since I saw E.T. as a small child. :(

Picture of dying E.T.

Spoiler alert: E.T. actually pulled through; so let’s continue trying to build a better web for everyone.