How to Use the Media attribute for handhelds of the HTML Link tag?

I currently have the following in my HTML document.

<link REL=StyleSheet HREF="/stylesheets/home.css" TYPE="text/css" MEDIA=screen>
<link REL=StyleSheet HREF="/stylesheets/homedark.css" TYPE="text/css" MEDIA=handheld>

However, nothing changes开发者_Go百科 on a handheld device (my Android phone). Is there something I'm doing wrong, or is it just not this simple?

You will need to use more advanced media queries, such as those that target screen size

So something more like

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

Inside your stylesheet, it would be something like this

@media only screen and (max-device-width: 480px) {
    //Your styles here
}

http://www.w3.org/TR/css3-mediaqueries/

Simple JS device detection might be helpful:

if( navigator.userAgent.match(/Android/i) || 
    navigator.userAgent.match(/webOS/i) || 
    navigator.userAgent.match(/iPhone/i) || 
    navigator.userAgent.match(/iPod/i)){
     // link to stylesheet
}

An even better thing to do is use some sort of combo... media queries & device / feature detection.

This is a good overview: http://www.csskarma.com/presentations/cssla/slides/mobile_media_touch.pdf (WARNING: pdf file)

According to w3schools the handheld media type is deprecated anyway. You will need to use media queries to accomplish what you want.

Too bad there isn't a media type for "phone". The ability to dial a number is really the most distinctive difference.

Maybe your phone doesn't consider itself a handheld according to whatever criteria the W3C uses for that term. Modern mobile browsers aren't that different from a full-blown desktop one and are nowhere near as limited as the original (useless) WAP browsers in dumbphones were. There's usually no real need to output a "handheld" type as the phone browser is better at deciding what/how to show content than the site is.