I’ve read a number of articles about the best approach for delivering content to mobile devices using CSS3 Media Queries, including Ethan’s article at A List Apart. While the general consensus seems to be “be careful”, I decided to do some testing of my own. Of course this “be careful” attitude is because, done incorrectly, you can cause a mobile device to download much more than you think. Oh, and there’s also the problem of that pesky Internet Explorer thingy… The question that I wanted answered is simply “what does a mobile device download when encountering a page using media queries?”

First, I created a simple page that contains a few boxes (list elements styled with CSS). In addition to text, one of the boxes contains (more…)