Detecting Mobile Devices for Web Applications

As mobile devices become a bigger and bigger platform for viewing web pages, web application developers need to start paying attention to making their websites mobile-friendly. Have you ever visited a website from a smartphone that was obviously not mobile optimized?

It's not a great experience, having to zoom in because the text is too small and scroll back and forth to read the information on the page. Some websites become all squished inside a mobile browser, obstructing important parts of the page and making it near impossible to use the application -- I had this experience recently with the Yelp on an Android phone.

One simple way to combat this issue is to have multiple stylesheets, and switch them based on which device is being used to view the web page.

For example, you can have a regular stylesheet named style.css, a stylesheet optimized for iPhones named iphone.css, and a stylesheet optimized for Android phones named android.css. Then, with little effort, you can detect the client and apply the appropriate stylesheet so the user gets a nice, optimized web experience no matter what platform they are using.

There are two relatively simple ways to do this: the Javascript way, and the CSS way.

The Javascript Way

You can use Javascript to check the current useragent variable for keywords like iphone, android, etc.

uagent = navigator.userAgent.toLowerCase();
if(uagent.indexOf('iPhone') != -1){ // iPhone device
  document.write('<link rel="stylesheet" href="style/iphone.css">');
} else if(uagent.indexOf('Android') != -1){ // Android device
  document.write('<link rel="stylesheet" href="style/android.css">');
} else{ // Default to desktop version
  document.write('<link rel="stylesheet" href="style/style.css">');
}

Wasn't that easy? Just stick that Javascript in the head tag and it should apply the correct stylesheet.

Want more options? There are many different keywords to check for, here are a few examples:

'webkit' // client is using a webkit browser
'blackberry' // Blackberry device
'palm' // Palm OS device

Of course, nothing in the world of cross-browser web application development is perfect (I wish!). If Javascript is not supported on the browser (which may be quite common in older mobile devices) or if the user turns off Javascript, this method will not work at all. Also, you're depending solely on the contents of the useragent variable, which may or may not be entirely accurate 100% of the time. But, there's another way!

The CSS Way

This method doesn't target specific devices, but instead uses their screen width as the independent variable. In your CSS link, you can add what are called CSS media queries (not supported by all browsers, unfortunately):

<link rel=”stylesheet” href=”style/style_320.css” type=”text/css” media=”screen and (min-device-width: 320px)”>

This way, you're not checking to see if a device is an iPhone or Android, but rather if it has a screen width of 320px or greater (or less, with max-device-width).

Of course, this has its share of issues as well -- Dean Hamack over at Bushido Designs has written a fantastic article on [Bulletproof Mobile Detection and Stylesheets without User Agent Detection or Server-side Scripting](http://www.bushidodesigns.net/blog/mobile-device-detection-css- without-user-agent/) that addresses many of these.

←

Detecting Mobile Devices for Web Applications

The Javascript Way

The CSS Way