Tag Archives: mobile platform detection

Mobile Device Detection using the UserAgent

26 Jun 2013

It used to be that you could use css media queries on mobile devices due to the limited screen resolutions available. We knew, for instance, that 480 x 320 was the iPhone’s screen resolution so you could do a media query based on those dimensions and deliver a phone layout, or the 1024×768 resolution was a tablet – which is funny because the iPhone 5 is 1136×640 – so, what is your media query going to do then? Even today designers are making assumptions about the break points for their media queries and there continues to be debate on the topic. I wonder why all the fuss when as time moves on the subject only just gets more confusing and debatable as higher resolutions are no longer solely in the realm of tablets. Today the gamut of resolutions varies to such an extent that you cannot assume that resolution x is a phone or resolution y is a tablet.

IMO if you’re trying to figure out which style sheet to apply you need to first know the sort of mobile device you’re dealing with as that gives you a better idea about the relative physical size of the device to begin with.

The way to do this is via the navigator object’s userAgent property. For iOS things are pretty simple – look for the presence of “iOS” and you know you are dealing with an Apple device. Look for “iPhone” and “iPad” and you know if you have an Apple phone or an Apple tablet.

For Android its mostly just as simple. I say mostly because not every manufacturer sticks to Google’s requirement that the word “Mobile” be present in all Android phone-specific UA strings. Even with that caveat this makes it possible for us to discern an Android phone from an Android tablet.

To take things a step further, you’ll also need to know the Android version numbers as you may find it neccessary to code against specific versions of Android – even within the minor versions – in order to make your app work as desired (or degrade as desired, as the case may be).

So then below you will find my take at this – it is a function that creates an object that contains everything that you may want. At the very least it contains everything that I personally find helpful.

Here’s the code:

...
    var _deviceInfo = {
        ios:false,
        android:false,
        iphone:false,
        ipad:false,
        androidTablet:false,
        androidPhone:false,
        isPhone:false,
        isTablet:false,
        isDesktop:false,
        pixeldensity:1,
        androidVersion:{full:null,major:null,minor:null,revision:null}
    };
	
    (function(){
        var ua = navigator.userAgent.toLowerCase();
        var pf = navigator.platform.toLowerCase();
        var iosTest = /mac.+mobile/gi;
        var andTest = /android/gi;
        var iPhoneTest = /iphone/gi;
        var iPadTest = /ipad/gi;
        var mobile = /mobile/gi;
        var desktopWin = /win/;
        var desktopOSX = /mac/;
        var deviceHeight = window.innerHeight;
        var deviceWidth = window.innerWidth;
        var androidUAVer = /[android\s](\d\.\d\.\d){1}/;
		
        if (iosTest.test(navigator.userAgent)){
            _deviceInfo.ios = true;
        }
        if (andTest.test(navigator.userAgent)){
            _deviceInfo.android = true;
        }
        if (iPhoneTest.test(navigator.userAgent)){
            _deviceInfo.iphone = true;
            _deviceInfo.isPhone = true;
        }
        if (iPadTest.test(navigator.userAgent)){
            _deviceInfo.ipad = true;
            _deviceInfo.isTablet = true;
        }
        if (ua.indexOf('android') != -1 && ua.indexOf('mobile') == -1){
            _deviceInfo.androidTablet = true;
            _deviceInfo.isTablet = true;
        }
        if (ua.indexOf('android') != -1 && ua.indexOf('mobile') != -1){
            _deviceInfo.androidPhone = true;
            _deviceInfo.isPhone = true;
        }
        if(desktopWin.test(pf) || desktopOSX.test(pf)){
            _deviceInfo.isDesktop = true;
        }
        if (_deviceInfo.android){
            var andVer = ua.match(androidUAVer)[1];
            var parts = andVer.split('.');
            _deviceInfo.androidVersion.full = andVer;
            _deviceInfo.androidVersion.major = parts[0]; 
            _deviceInfo.androidVersion.minor = parts[1];
            _deviceInfo.androidVersion.revision = parts[2];
        }
        if (window.devicePixelRatio){
            _deviceInfo.pixeldensity = window.devicePixelRatio;
        }
    })();
...

Ideally you drop the above within your app’s namespace, but once you have it incorporated within your project you can use the _deviceInfo object to learn about the device in question. Take a look at the object declaration at the top – its obvious what you can get out of it.

Note that the isPhone and isTablet properties are just generic “phone” and “tablet” flags and work for both iOS and Android. If you want to get specific, then use the platform specific properties where iphone and ipad are obviously those devices and androidTablet and androidPhone are what their titles infer.

An example application of this is writing device-specific style sheets into your Web app (add break-points for the specific device if you’re so inclined):

...
    (function(){
        var _d = your_name_space.getDeviceInfo();
        if (_d.isTablet && _d.ios){
            document.write('');
        }
        if (_d.isTablet && _d.android){
            document.write('');
        }
        if (_d.iphone){
            document.write('');
        }
        if (_d.isPhone && _d.android){
            document.write('');
        }
    })();
...

Together with responsive layouts the above should serve you well.

Another way to make use of this script is for device-specific feature enablement such as in this case where I’m setting application-wide features in jQuery Mobile:

...
    var _d = your_name_space.getDeviceInfo();
    $.extend( $.mobile,{
        defaultDialogTransition: (_d.android ? 'none' : 'pop'),
        defaultPageTransition: (_d.android ? 'none' : 'fade'),
    });
...

Mobile-Specific Style Sheets

28 Aug 2012

Here’s a brief snippet of code that I just wrote to handle serving up style sheets for a mobile project – it detects iOS, Android, iPhone and iPad allowing you to write in platform/device-specific style sheets into your HTML documents. This is a self-invoking function, simply paste into the head of your document and you are done – of course, change the CSS paths to your liking.


This simply writes in a style tag to the appropriate style sheet and is easily adapted to whatever your needs might be.

Another method of using platform/device-specific styles is to write them in when you’re doing your DOM manipulation – i.e., whenever you add content to the page. Doing so give you the ability to insert the proper id and class selectors using your framework’s ability to detect the given platform/device. If you take this route you will need to load up a style sheet that contains all of your css so that all of your styling is available to be used whenever its applied to your layout.