How to use Media attribute for handheld computers with HTML Link tag?

Question

My HTML document currently has the following.

<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 on the handheld device (my Android phone). Is there something I'm doing wrong, or is it just not that simple?

Answer 1

You will need to use more sophisticated multimedia 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)"> 

In your stylesheet it will be something like this

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

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

Discovering a device with simple JS might be useful:

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

Better still is to use some kind of combo ... media queries and device / function discovery.

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

Answer 2

According to w3schools , the type of media is outdated anyway. You will need to use media queries to accomplish what you want.

Too bad that there is no media type for the “phone”. The ability to dial is really the most distinctive difference.

Answer 3

Perhaps your phone does not consider itself pocket-sized according to any criteria that the W3C uses for this term. Modern mobile browsers do not differ from a full-featured desktop and are not limited anywhere, since there were original (useless) WAP browsers in handbags. Usually there is no need to display a “pocket” type, since the phone’s browser decides what / how to display content than the site is.