Question

I’ve defined the following media queries in order to load different .css files for mobile and desktop browsers:

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

But in mobile Internet Explorer I see styles from desktop.css for some reason. Why it is so? How can I fix it?

Answer 1

Usage of handheld is not reliable in mobile browsers, some mobile browsers (such as Mobile Internet Explorer) use media="handheld" if it is the only value defined, but use media="screen" by default if both are defined. The hack is to define media="Screen", with an uppercase S, this causes Mobile IE to use the handheld option when both are defined.
But I’d suggest you to avoid using these media queries as you should rely on screen resolution rather than on mobile browser. For example, Mobile Safari could be on both iPad or iPhones, but you need to style your webiste differently because of different size of the screen. So you can use the following media queries for iPhones:

<link rel="stylesheet" media="only screen and (min-device-width: 480px)" href="iphone.css" />

For iPad

<link rel="stylesheet" media="only screen and (min-device-width: 768px)" href="ipad.css" />

For desktop

<link rel="stylesheet" media="screen and (min-width: 960px)" href="desktop.css" />

Or you can specify media queries directly in .css file

@media screen and (min-width: 960px) {
  .class {
    background: #ccc;
  }
}

Here are some good articles about it:

http://webdesignerwall.com/tutorials/css3-media-queries

http://www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/

http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/