CSS Media Queries
Media Queries are a powerful feature of CSS 3 because they allow a single page to be readable on a variety of devices (pc, tablet, phone), all through targeted css stylesheets. By using simple rules, media queries will swap css stylessheets dynamically based on attributes like screen size and orientation. A great series of articles written by David Powers over at Adobe discuss how to effectively use media queries. If you want a deep dive, read over the W3C specification for CSS 3 media queries.
Take an example: you want to target a screen size of 640 pixels or smaller. Pay particular attention to the media attribute and the simple rule it contains:
<link href="small.css" rel="stylesheet" type="text/css" media="only screen (max-width: 640px)">
IE 8 and below support
IE 8 and below do not support media queries naively, but they do support conditional stylesheets (and other things, like javascript files) through the use of special, IE-specific comment tags in HTML code:
<!--[if lt IE 9]> <link href="ie8.css" rel="stylesheet" type="text/css"> <![endif]-->
If you want to read up more on this, like how to target specific versions of IE, head to this CSS-tricks article.
A real world example
Here is something a bit more complicated: targeting multiple devices and their orientations. Now, I’m not saying that all those min/max widths are exactly correct for those particular devices, but media queries used to target them might look like this (note the highlighted lines):
<!-- Force mobile devices to report their true pixel dimensions --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Base CSS --> <link href="basic.css" rel="stylesheet" type="text/css"> <! -- Phone Support --> <link href="phone.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 320px)"> <link href="phoneLandscape.css" rel="stylesheet" type="text/css" media="only screen (max-width: 480px) and (orientation: landscape)"> <! -- iPhone 4 Support --> <link href="iphone4.css" rel="stylesheet" type="text/css" media="only screen (min-width: 481px) and (max-width: 640px)"> <link href="iphone4Landscape.css" rel="stylesheet" type="text/css" media="only screen (min-width: 481px) and (max-width: 960px) and (orientation: landscape)"> <! -- Tablet Support --> <link href="tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 641px) and (max-width: 768px)"> <! -- Web Support --> <link href="web.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)"> <!-- IE 6/7/8 Support --> <!--[if lt IE 9]> <link href="ie.css" rel="stylesheet" type="text/css" /> <![endif]-->
Issues with mobile browsers
Mobile browsers pull some trickery because they don’t report their true screen dimensions. Android (which hopefully will turn into Chrome for Android), Mobile Safari, and IE Mobile set their widths to ~1000 pixels regardless if the page is smaller (mobile safari is 980 pixels, ie mobile is 1024 pixels). This means you’re not getting an accurate count of their pixel dimensions.
Thankfully there’s a simple solution. Apple created a meta tag to quash the disconnect media queries have between mobile and desktop browsers. Even better, this solution has for the most part been adopted by other mobile device manufacturers and has even been added to the W3C editor’s draft specification.
Add the following meta tag to the <head> of your page:
<meta name="viewport" content="width=device-width, initial-scale=1">
Media Queries and Javascript
Media queries aren’t exclusive to just stylesheets either. Javascript is fully capable of using media queries like events to execute code once the query rules are met. That opens up a lot of possibilities, but I’ll have to save that discussion for another post.