Hace varios años tuve la inquietud de poder trabajar con el ancho y alto del viewport y sus cambios mediante jQuery, logrando crear un plugin para ello. BrowserSizr fue pionero en una época donde responsive no existía como palabra ni concepto. Desde entonces se ha masificado y estandarizado este comportamiento, y el DOM ya permite detectar y probar los resultados de media queries mediante JavaScript.

El objeto MediaQueryList puede recibir el estado de una query ó recibir notificaciones cuando estos estados cambien. Para utilizarlo, antes, se debe crear el objeto representando el media query a través del método window.matchMedia. En el siguiente ejemplo, trabajaremos con el valor de 600px de un max-width que ya tengo definido con CSS:

var mediaquery = window.matchMedia("(max-width: 600px)");
if (mediaquery.matches) {
   // mediaquery es 600
} else {
  // mediaquery no es 600
}

Ver ejemplo 1

Si necesitas constantemente saber en qué estado está el o los media queries, es más eficiente registrar un `listener` que pueda entregarte el resultado siempre que un cambio ocurra:

function handleOrientationChange(mediaquery) {
  if (mediaquery.matches) {
    // mediaquery dentro de 600
  } else {
    // mediaquery fuera de 600
  }
}
mediaquery.addListener(handleOrientationChange);

Ver ejemplo 2

Soporte:

Chrome, Safari, Firefox, IE10+.

Links:

• Testing media queries | MDN
• matchMedia polyfill for testing media queries in JS | GitHub