Media queries and JavaScript

Mobile development and responsive design are frequently mentioned these days. The most widely used technique for responsive design is media queries, a CSS3 extension of the media types frequently used in HTML4 and CSS2.

There are lots of things to consider, such as resolutions and variations (for instance have a look at Andy Clarke’s Hardboiled CSS3 Media Queries). Media queries are not supported by IE8 or older, but I guess we can live with that.

Media queries are indeed a nice asset when it comes to CSS, but the technique is only part of the solution. Media queries will not automatically prevent the browser from downloading parts of the page which may be superfluous on mobile devices, something the developer needs to consider when creating mobile adaptions.

External scripts can be quite large, which can be a problem. The minified and Gzipped version of JQuery is about ten times smaller in filesize than the regular version. It could also download a lot of images which may be unused on certain devices.

It would be nice to have a media query equivalent for JavaScript and other resources. There are some work-arounds, such as the one described by Peter-Paul Koch in Combining media queries and JavaScript, but I hope this will improve in the future.