CSS media type: How to load CSS for mobile?

Question

With this code:

<link rel="stylesheet"
      type="text/css"
      href="media/css/mobile.css"
      media="handheld" />
<link rel="stylesheet"
      type="text/css"
      href="media/css/screen.css"
      media="screen" />

on my N78 the nokia's default browser and opera mini load screen.css instead of mobile.css.
What am I missing?

Answer 1

Nokia N78 uses the S60 browser, which reads only "screen" stylesheets. It won't read the "handheld". It doesn't support media query. Instead of trying to type everything here, have a look at this article and you will solve the problem - http://www.alistapart.com/articles/return-of-the-mobile-stylesheet

Answer 2

Using the iPhone as an example:

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

I have no idea which browsers/devices this does and does not work for. The only mobile device I've developed for is the iPhone. But I'm sure you can give it a shot with your nokia.

More on media queries

Answer 3

Opera Mini uses the media type screen because it fits its behavior and capabilities best. However, it will use handheld stylesheets if you switch to mobile view mode. See A developer’s look at Opera Mini 5 beta 2 for more information.