How to target the Blackberry browser?

Question

I am using the following to target iphones, and handheld devices to use specific mobile styles sheets but the Blackberry browers is picking up only the regular screen style sheets.

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

All the other mobile devices I've tested the site on are picking up the correct style sheets.

Does anyone know a way to target the Blackberry browser to do the same?

Thanks!

Answer 1

I ended up using Javascript to detect user agents.

Then printing mobile.css for handheld and screen if it is a mobile device (because the BlackBerry and iPhone think they are screens) and printing the regular style sheets if it isn't a mobile device.

It doesn't work for any device that doesn't have Javascript but they are probably better off seeing the bare bones version of the site anyway.

Answer 2

The state of mobile browsers is such a mess at the moment that I would not recommend trying to detect versions in the client. The most reliable way to do it is to use something like WURFL http://wurfl.sourceforge.net/ and do all your checking server side.

Good luck getting anything working nicely on the blackberry! Oh and don't forget to that the carriers might be screwing with your HTML before it even gets to the phone.

Answer 3

I don't have an exact answer and have never tried this myself, but you might try checking out the Mobile Device Browser File. This is targeted at ASP.Net developers working on mobile apps, however may still prove useful if you're not. Its open source and licensed under the MS-PL.

If you are using ASP.Net try checking out this podcast from Scott Hanselman for more info on the MDBF - ASP.Net and the Mobile Web

Answer 4

I would recommend checking out the following sites:

http://deviceatlas.com/

http://mobileelements.com/

http://wurfl.sourceforge.net/

They all talk about how you target particular mobile devices, so that way you can use different style sheets for different mobile devices.

Generally for a black berry just look for "blackberry" in the user agent string is a good enough case

Answer 5

This will target Blackberry devices specifically with a stylesheet called blackberry.css

var ua = navigator.userAgent;
if (ua.match(/(BlackBerry|Blackberry|blackberry|BB|bb|RIM|rim|Playbook|PlayBook|playbook)/)!=null) { 
     document.write('<link rel="stylesheet" type="text/css" href="blackberry.css">');
     console.log ('Blackberry confirmed'); 
}