CSS support for handheld, iPhone AND browsers

I have the following in my index.xhtml

  style type="text/css" media="screen and (min-width: 500px)"
    @import "style/index.css";
  /style
  style type="text/css" media="screen and (max-width: 500px)"
    @import "style/portable.css";
  /style
  style type="text/css" media="handheld"
    @import "style/handheld.css";
  /style

It works great in Opera, Opera-Mini, iPhone and a bunch of handhelds (N70, Motorola)) BUT it refuses to work with Konqueror and Firefox. How do i fix this? (I want to keep the CSS in separate files, and I'm not keen on enclosing/embedding huge chunks of CSS within @media screen {}. I'd also prefer to not go with link because style is what we've use开发者_StackOverflowd in other pages)

Expect more to fail. If you aren't targeting only modern mobile phones forget about css media queries. You might want to implement a server side solution to find out device's capabilities and screen

I don't see the difference in using <link ...>. @import also sends a request.

<link media="only screen and (min-width: 500px)" href="style/index.css" />

This approach allows you to serve base styles to old mobile devices that don't understand media queries and then add more advanced CSS for smartphones, tablets and desktop browsers that do.

<link rel="stylesheet" href="css/styles-base.css" />
<!-- for all devices; includes any base ("reset") styles required  -->

<link rel="stylesheet" media="only handheld and (min-width: 300px), only screen and (min-width: 300px)" href="css/styles-modern-300.css" />
<!-- for all modern devices, including "smartphones" -->

<link rel="stylesheet" media="only screen and (min-width: 740px)" href="css/styles-modern-740px.css" />
<!-- for all modern devices with "tablet-sized" and larger viewports (including iPad) -->

<link rel="stylesheet" media="only screen and (min-width: 1000px)" href="css/styles-modern-1000px.css" />
<!-- for all modern devices with "desktop-sized" and larger viewports -->

<link rel="stylesheet" media="only screen and (min-width: 1200px)" href="css/styles-modern-1200px.css" />
<!-- for all modern devices with "larger desktop-sized" viewports -->

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0;">

I would say the extra few HTTP requests for modern devices are the least of your worries if you want to provide styling support to phones.

You can also use this jQuery Plugin to help IE along with media queries.