CSS for Mobile Browsers : Where to Insert the CSS (part 2) - Media queries

1.2. Media queries

CSS3 comes to our help with media queries. These complex media definitions include conditions about the screen size and media values allowed.

For example, we can say: “Apply this stylesheet for devices supporting only screen and with a maximum device width of 480.” This will apply to an iPhone, because in landscape mode it has a screen width of 480px and it doesn’t support print, handheld, or any other media type. Here’s how to write this as a conditional media query:

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

					  

<link media="screen and (min-device-width: 481px)" href="notiphone.css"
      type="text/css" rel="stylesheet" />

Warning:

Internet Explorer (through version 8) does not understand CSS media queries, so it will apply the iPhone stylesheet by default. That is why we need to add IE conditional comments:

<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only
      screen and (max-device-width: 480px)"
      href="iphone.css" />
<!--<![endif]-->

Some browsers also understand CSS media queries inside the same stylesheet file. For example, the following code will change the background color displayed on an iPhone (and other similar devices):

@media only screen and (max-device-width: 480px) {
   body {
      background-color: red;
   }
}

An extension for conditional media queries is the orientation media query, which allows us to define different styles for different orientations. There are two possibilities: orientation:portrait and orientation:landscape. For a device running iOS 3.2 or later, you can use the orientation media query as follows:

<link rel="stylesheet" media="all and (orientation:landscape)" href="land.css" />
<link rel="stylesheet" media="all and (orientation:portrait)" href="port.css" />

					  

<link media="all and (-webkit-min-device-pixel-ratio:2)"
href="iphone4.css" type="text/css" rel="stylesheet" />

The orientation query also works in Android from 2.0, in MicroB for MeeGo devices like the Nokia N900, and in Firefox Mobile. Table 2 provides a more complete list of browser compatibility for CSS media queries and the orientation extension.