Bulletproof Mobile Device Detection and Style Sheets without User Agent Detection or Server-Side Scripting

by Dean Hamack

January 23rd, 2009

With the release of the iPhone and T-Mobile G1, smartphone sales have skyrocketed. Recent statistics show that at least one in one-hundred people accessing the internet is doing so via a mobile device. Developers have wisely taken note of this, and started optimizing websites for these devices. But even when you combine the iPhone and the G1 usage numbers, it still only accounts for about 50% of the mobile traffic in the U.S., and 35% in the rest of the World. That leaves a lot of other mobile users out in the cold.

Recently A List Apart published an article called “Return of the Mobile Style Sheet” by Dominique Hazael-Massieux. The aim of the article is to give developers a method to target not only the latest generation phones like the iPhone and G1, but other phones as well. While the article provides some good information, it has several major flaws:

1. The data the author uses to determine device capabability is derived primarily from Mobile Test Harness (a site developed and maintained by the author). The statistics on this site are obtained through self-reporting by users, and the numbers are wildly inconsistent. Some users report passes, while others report failures for the same test. Others show passes for tests that failed when I conducted them on the actual device. I suspect part of this may have to do with people using mobile browser emulators (like iPhoney), rather than actual mobile devices. The rest of the disparity likely comes from users who have altered the default settings on their devices.
2. The author misquotes his own statistics in the article. For example, he states that the BlackBerry browser supports only handheld style sheets. But both his own user generated statistics and my tests show that BlackBerries ignore the handheld media type.
3. The method requires the use of four style sheets: a “core” stylesheet, a “screen” stylesheet, an “anti-screen” stylesheet, and a “handheld” stylesheet. All browsers regardless of the platform (handheld or desktop), have to load at least two out of four of these style sheets, and some load all four. That’s a lot of HTTP requests, especially for a device operating over a cellular connection.
4. The method still requires the use of JavaScript or server-side scripting to catch the remaining devices not detected previously.
5. The method fails on BlackBerries, Internet Explorer Mobile, and Symbian, which accounts for over one-third of the mobile devices in U.S.

After testing this method extensively, I decided to try and build a better mousetrap.

The result:

• A method that works on approximately 85% of mobile devices
• A method that requires only two style sheets, and issues only one HTTP request on most mobile devices

Do I have your attention? Read on…

“You can’t please all of the people, all of the time” (but you can give it a shot)

The first thing we need to do is determine who our audience is. The most accurate statistics I’ve seen on mobile device usage come from a company called AdMob:

“AdMob serves ads for more than 6,000 mobile web sites and 400 applications around the world. AdMob stores and analyzes the data from every ad request, impression, and click and uses this to optimize ad matching in the network.”

AdMob compiles both national and international usage statistics. Since I’m assuming most people reading this article are operating inside the U.S., we will focus on those stats for now.

iPhone and Android: 50% (combined)

Both the iPhone and Android support screen stylesheets, rather than handheld stylesheets. Fortunately, they also support CSS media queries, so targeting these devices is easy:

<link rel=”stylesheet” href=”handheld.css” media=”only screen and (max-device width:480px)” />

That covers 50% your audience.

RIM: 19%

Without a doubt, BlackBerries are the hardest to target. The problem is two-fold:

1. Everytime RIM comes out with a new model, they change the way the browser operates.
2. All of the various carriers (T-Mobile, AT&T, etc.) setup the devices differently.

I could only test a handful of the different models, but to my knowledge, no BlackBerry supports handheld stylesheets by default, and some don’t support them at all. JavaScript is supported on all BlackBerries, but it’s turned off by default. I conducted an informal survey of several B.B. users I know (including a guy who used to do tech support for AT&T), and not one of them was aware of this fact. That’s something to consider if your site is heavy on JS.

Other models (like the the 8900 Curve and the 8100 Pearl), take it one step further by turning off ALL stylesheet support by default. The user actually has to go into the browser settings and enable it. Once they’ve done that, they have the option to select either “handheld” or “screen” media types (handheld is the default). The screenshot below shows the Browser Configuration settings on a Curve.

While I applaud RIM for giving consumers that kind of flexibility, I wish they would take a cue from other companies and either (a) start supporting media queries, or (b) turn on handheld stylesheet support by default. I’m willing to bet they get a lot of support calls from people asking, “why do websites look like crap on my Curve?” I got just such a call from a client of mine, which is how I discovered this unfortunate fact in the first place.

The only BlackBerry that completely failed the test was the 8130 Pearl from Verizon. No matter what I tried, it always picked up the screen stylesheet, and there is no browser setting to over-ride it. The other BlackBerries I tested are generally a little easier to deal with. Unlike the ALA method, the one presented here works on both the Storm and the Bold 9000 (two of RIM’s most popular models), without changing any of the default browser settings. The other Pearl models are hit and miss depending on the carrier and the model.

The bottom line is that it’s a crapshoot when it comes to RIM, and there’s nothing you can do about it. Not even user-agent detection works 100% of the time on BlackBerries. No matter what method you use, you won’t be able to cover them all. Half the time your users will get your mobile stylesheet. The other half of the time they’ll get either the screen styles, or no styles at all. That’s why it’s so important to use good coding practices and avoid “grid” or table based layouts.

To be conservative, we’ll say this method works for roughly half the BlackBerry browsing population. So that’s another 10% of the mobile population covered.

Windows Mobile: 15%

With all the attention being paid to the iPhone and the G1 these days, Windows Mobile phones aren’t getting much press (or that much love from developers). But the truth of the matter is that Microsoft sold more phones than Apple did in the last quarter of 2008. So don’t count them out of the running just yet.

In their infinite wisdom, Microsoft decided to support both handheld AND screen stylesheets on Internet Explorer Mobile. So whatever is last in the cascade order wins. The good news is that all you have to do is place the handheld stylesheet after your screen stylesheet, cancel out any non-mobile friendly attributes, and you’re good to go. The bad news is, the browser has to load both, and depending on how big your stylesheets are, that could make for a pretty slow user experience. Fortunately, there’s a way we can prevent this. More on that when we get to the code.

Some savvy Windows Mobile owners use alternate browsers such as Opera Mini, or the promising new Iris browser, both of which support the “max-device-width” query. But like owners of PC desktops, the overwhelming majority seem to stick with IE. Once again, the method presented here succeeds, while the ALA method fails. Chalk up another 15%.

Palm OS: 9%

The popular Palm Treo and Centro use the Blazer browser built by NetFront. NetFront also offers a browser for Windows Mobile users. Like Mobile IE, NetFront supports both handheld and screen stylesheets, and doesn’t support media queries. Fret not, we have ways of dealing with NetFront as well… Add another 9% to our tally.

Hiptop: 4%:

If you’re over the age of 25, right about now, you’re probably thinking, “What the hell is Hiptop? Did P-Diddy start making a cell phone?”

Hiptop is the operating system used in T-Mobile Sidekick, which is popular with teens and tweens. The Sidekick is built by Danger, which was acquired by Microsoft last year. MS has big plans for the Sidekick (I know because they contacted me about becoming a developer ). So don’t expect Hiptop, or the Sidekick to go away anytime soon. Hiptop uses the AvantGo 3.2 browser, which also supports both handheld and screen stylesheets, and no media queries. I couldn’t get my hands on an actual Sidekick for testing, and their emulator is time consuming to set up. 

Symbian: 2%

Symbian is the OS used on Nokia phones. In the U.S., Nokia currently holds a pretty small market share, as a lot of their customers have switched teams. But in the rest of the world, Nokia is still king. Much to the dismay of a lot of Nokia owners, Symbian doesn’t support either the screen or handheld media type. It only supports stylesheets without a media declaration. So in order to target these users, we have to go old-school. There’s our final 2%.

Alright, alright. Gimme the code already!

Here you go:

<!-- Mobile device detection by Bushido Designs: BushidoDesigns.net -->
<link rel="stylesheet" type="text/css" href="mobile.css"  />
<style type="text/css" media="screen and (min-width: 481px)">
<!--
@import url("screen.css");
-->
</style>
<!--[if IE]><link rel="stylesheet" type="text/css" href="screen.css"  media="screen" /><![endif]-->
<link href="mobile.css" rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 480px)" />

Wait, that’s it?

Yep. Looks really simple, doesn’t it? But as the say, the devil is in the details.

Here’s the Breakdown:

1. Line two:

   <link rel="stylesheet" type="text/css" href="mobile.css"  />

   Since some devices (like Symbian) don’t support stylesheets with a media declaration, we first need to include our mobile stylesheet for all users, regardless of platform. The only drawback to doing this is that desktop browsers pick it up as well. But mobile stylesheets tend to be pretty light, and it’s a lot easier to cancel out mobile styles in your screen stylesheet, than it is to do it the other way around (like the ALA method).

2. Lines three through six:

   <style type="text/css" media="screen and (min-width: 481px)">
   
   <!--
   
   @import url("screen.css");
   
   -->
   
   </style>

   This is the key part of this method. Not all mobile devices support the “max-device-width” media query. But Firefox and Desktop Safari both support the “min-width” query. By using it, we can ensure that only those browsers pickup our screen stylesheet. Most mobile devices don’t understand “min-width” (like IE Mobile), “@import” (like Symbian), or both. And those that do, are smart enough to figure out that they shouldn’t import that stylesheet because their resolution is too low.

3. Line seven:

   <!--[if IE]><link rel="stylesheet" type="text/css" href="screen.css"  media="screen" /><![endif]-->

   IE 6 and 7 don’t support the “min-width” query, so we need to use a conditional comment to make sure Desktop IE picks it up.

4. Line eight:

   <link href="mobile.css" rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 480px)" />

   This is our safety net to make sure that any device that slipped through the cracks and somehow managed to pickup our screen stylesheet is going to get a second dose of handheld styles to over-write them.

Optional “Advanced Device” Stylesheet

As an option, you can include a third stylesheet for browsers that understand the “max-device-width” query. In most cases, I think this is unecessary, but you may want to do it if you are specifically targeting iPhone and Android users. If you want to do that, you just need to create an “amobile.css” stylesheet, and break line eight into two lines, like so:

<link href="mobile.css" rel="stylesheet" type="text/css" media="handheld" />

<link href="amobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />

Test Data

Mobile devices tested with this method:

• iPhone/iPod Touch (Mobile Safari)
• T-Mobile G1 (Android)
• T-Mobile MDA (Windows Mobile 5: IE)
• HTC S730 (Windows Mobile 6: IE, Opera Mini 4, and Iris)
• LG Chocolate (Openwave 6)
• Blackberry Storm, Blackberry Pearl (multiple models), Blackberry Bold, Blackberry Curve (multiple models)
• Nokia Mobile Browser Simulator 4 (Symbian)
• Treo 650 Simulator (Blazer 4)
• Openwave V7 Simulator

Desktop browsers tested with this method:

• Firefox 2 and 3
• Safari 2 and 3
• IE 6 and 7

Help contribute to this article by testing your device:

Want to help your fellow developers out by contributing to this article? Here’s how you can do so:

Go to the following url on your mobile device. In order to get accurate data, we request you use an actual device with the factory default settings, and not an emulator:

http://www.bushidodesigns.net/mt/

The test is very simple; if you are on a mobile device you should see a red background and the phrase “You are on a mobile device”. If instead you see a blue blackground and the phrase “You are on a desktop browser”, the test has failed. Either way, we want to hear your results.

Specifically, we’d like to hear from owners of the following devices:

• Sony PSP (Playstation Portable)
• Newer Nokia phones (N96 – N79, N810, etc.)

Happy mobile browsing.

Update – 01/31/09:

Ron Theis of Ridiculous Software was gracious enough to provide me with a Sidekick for testing. Unfortunately, it rendered the screen stylesheets. I also managed to get my hands on an LG Dare (LG’s iPhone clone), and the result was the same.  Stay tuned for further enhancements to the method.

Update – 02/18/09:

A reader wrote in and informed us that this method fails on the NetFront Browser (used on devices such as the Samsung Eternity). Further testing on this device reveals that it is pretty much impossible to serve an alternate stylesheet to NetFront users. In my humble opinion, companies like NetFront are shooting themselves in the foot by not adding support for handheld media types or media queries.