CJW Network Home

Mobile Browser Detection – a ridiculously simple approach

Wednesday March 28 2012: Donat Fritschy

Mobile Browser Detection

Is browser sniffing the only viable approach for mobile device detection?

When it comes the web development, history seems to repeat. Not long ago, sighs of relief could be heard when – finally! – Internet Explorer, Firefox, Safari and Opera provided a more or less uniform and predictable environment. The dark ages of incompatible browsers seemed to be past.

But the joy didn’t last long. With the proliferation of mobile devices we are right back in the middle ages – browser sniffing seems to be the only way to tell whether we are running on a mobile device. An active community at http://detectmobilebrowsers.com/ tries to catch up with the daily longer list of devices, carefully crafting them into regular expressions that are bound to be obsolete at the time you download them. The same holds true of the eZ Publish implementation that is based on the same source (https://github.com/ezsystems/ezpublish/commit/a695d9d6b5ec3fd346054132863ee9bd2315aa6f).

Is there no alternative? In long years of software development I’ve always strived for simple solutions. And the approach I’m going to present for the mobile browser detection is really simple, not to say ridiculously simple.

Unless you are targeting a very specific device, as the new iPad for instance, you do not need to care about manufacturers, models or OS versions. Most probably you want only know: is this a device with a small screen? A screen so small that I need to deliver mobile content? The answer could be as easy as a single line of JavaScript code in the desktop version of your website:

if ( screen.width < 768 ) location.replace( mobile url );

Of course, this solutions is not perfect. The decision is made on the client, resulting in a delay and a new page being loaded. A server side solution would be more pleasing, but unfortunately the screen size is not readily accessible at the server level.

And astonishingly enough, the screen size is not reported accurately by all clients, as James Pearce points out in his excellent post (http://tripleodeon.com/2011/12/first-understand-your-screen/). But for our purpose screen.size works well enough. Finally you might argue, that the value of 768 as width breakpoint is arbitrary. Of course you are right. Change it at your discretion and according to your needs.

So what about users that are unhappy about our decision to serve them the mobile version? Of course we want to make them happy, providing a special link to the standard website in the mobile version. This link results in a cookie being set that disables the switching to the mobile version. The complete code would then be:

if ( location.search.match( 'notmobile' ) ) $.cookie( 'notmobile', '1', { expires: 1, path: '/' } );
if ( $.cookie( 'notmobile' ) == null && screen.width < 768 ) location.replace( mobile url );

(Note: this snippets relies on the jQuery Cookie plugin (https://github.com/carhartl/jquery-cookie) . Manipulation of cookies without jQuery would add only a few more lines of code).

I hope this blog post is useful to you and I welcome all comments. Thanks for reading!

Coolscreen.de - internet development, audits and consulting Jac Systeme - software development, support and maintenance Webmanufaktur - alles ausser gewöhnlich eZ Publish Silver Partner