Detectando media queries con JavaScript

17/feb/2015 3

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:

Comentarios

  1. Utilicemos jQuery · 04 de marzo de 2015 - Enlaces · Artysmedia [#]

    […] 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 – Detectando media queries con JavaScript […]

  2. franjrc [#]

    Buen dia, excelente ejemplo, me parece que ejemplo 1 y 2 están al revés

Responder a Utilicemos jQuery · 04 de marzo de 2015 - Enlaces · Artysmedia ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab