HTML | Mobile and CSS media types

Below are my stylesheets for my开发者_C百科 mobile site:

<META name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<META name="HandheldFriendly" content="true" />
<link type="text/css" rel="stylesheet" media="screen and (min-device-width: 481px)" href="css/smartmobile.css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/smartmobile.css" />
<link type="text/css" rel="stylesheet" media="handheld" href="css/mobile.css" />

I loaded the page in an iPhone and it looks like it's supposed to. However when I load the page in a Blackberry it doesn't use the "handhled" one but rather tries to use the other stylesheets. Anyone have any thoughts to why this happening?

Yes most phones even more so the older ones will simply ignore the "media" type and I would suggest using some from of server side detection if you need the css to be different on different phone types.

Consider media queries (as you've done for iPhone) instead of media types. http://www.alistapart.com/articles/responsive-web-design/ Many devices don't support the handheld media type.