Photograph of twins sitting back-to-back, taken from above
Part of the Responsive Design Reading List

Many developers associate responsive design exclusively with , but the reality is that every web technology has a role to play in optimizing sites for devices. In some cases, there are functionally equivalent features across different languages that allow you to choose the most appropriate tool for a particular set of conditions.

matchMedia is one such feature, allowing CSS3 media queries to be tested directly within . The syntax couldn’t be easier:

window.matchMedia("(max-width: 800px)");

Almost any media query can be placed within the inner parentheses. For the sake of ease and re-use, I prefer to make a matchMedia test into a JavaScript variable: 

var screencheck = window.matchMedia("(min-width: 800px)");

To determine if the condition is true, use the .matches property. This could be the condition of an if statement: 

var screencheck = window.matchMedia("(min-width: 800px)");
	if (screencheck.matches) {
		/* JavaScript code activated if the browser window is at least 800 pixels wide */
}

matchMedia In Practice

As a broad rule, matchMedia is used when a dynamic addition is desired on a page in response to browser size changes, in situations where CSS media queries won’t cut it. A good example is the random article bar at the top of this page (assuming that your browser is set wide enough to see it). The vast majority of desktop browsers can see the feature, but there’s little point in sending the images and links to a smartphone, due to lack of space. A common developer approach would be to deliver the feature bar to every browser regardless, hiding it on smaller devices using display: none in a CSS media query. While that works, it’s wasteful of bandwidth, processor cycles, and battery life. A better solution is to only load the content if the screen is large enough to display it: 

var minql = window.matchMedia("(min-width: 530px)");
	if (minql.matches) {
		$("#featured").load("/extras/featuredbar.php);
}

Here I’m using JQuery’s simple AJAX .load syntax to bring the random articles into an element with an id of featured, but there are many possibilities. In theory, you could use matchMedia to dynamically load different stylesheets as the browser resizes, although it’s likely that simply merging the separate CSS files into a single stylesheet would provide better performance.

What about PHP?

The obvious counterpoint to this is “why can’t I detect the mobile device on its first request to the server, and feed the data it needs from there?"

While that would arguably be more efficient, there are a few issues. As server-side languages, technologies like and Perl don’t have access to the same client information that JavaScript and CSS do. PHP cannot determine a device’s screen size or DPI, for example, so most server-side solutions rely on some form of user-agent sniffing. (php-mobile-detect is a good example).  While this works, it always makes me a little uncomfortable: identifier user agent strings will change, eventually breaking the logic of your server-side script.

PHP and associated technologies absolutely have roles to play in responsive design, to the point at which they have been given their own acronym: RESS, for Responsive Design with Server-Side Components. Like other technologies, server-side is used as one part of a responsive solution, not the whole package.

Support

matchMedia has excellent support across all browsers, with the exception of – can you guess? – Internet Explorer. Both it and the Blackberry browser are limited to version 10+. (Opera also has only recent version support, but I expect things there to change rapidly as the browser segues into the Blink rendering engine). Paul Irish, Scott Jehl and Nicholas Zakas collaborated to code a good matchmedia polyfill solution for older browsers.

Photograph by Joel Zobel, used under a Attribution-NonCommercial-NoDerivs 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.