How do I target my Blackberry browser?

Question

I use the following to target iphones and handheld devices to use separate sheets of mobile styles, but BlackBerry Browers only compiles 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 other mobile devices on which I tested the site compile the correct style sheets.

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

Thanks!

Answer 1

As a result, I used Javascript to detect user agents.

Then print mobile.css for the portable and the screen if it's a mobile device (because BlackBerry and iPhone think it's screens) and print regular style sheets if it's not a mobile device.

It does not work on any device that does not have Javascript, but they probably see the site’s bare-bone version better anyway.

Answer 2

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

Good luck getting something good on the blackberry! Oh, and don't forget that carriers can spin along with your HTML before it even hits the phone.

Answer 3

I don’t have an exact answer and I have never tried this myself, but you can try checking the Mobile Browser File . This is intended for ASP.Net developers working with mobile applications, but it may be useful if you do not. Its open source and licensed under MS-PL.

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

Answer 4

I would recommend checking the following sites:

http://deviceatlas.com/

http://mobileelements.com/

http://wurfl.sourceforge.net/

They all talk about how you focus on specific mobile devices, so you can use different stylesheets for different mobile devices.

Usually for black berries just looking for “blackberry” in the user agent string is a good enough case

Answer 5

This will target Blackberry devices specifically with a style sheet 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'); }