Detectando media queries con JavaScript

17/Feb/2015 258

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. ivermectin tablets for humans [#]

    stromectol https://stromectolforte.com/ stromectol 6mg ivermectin tablets

  2. accutune [#]

    accutane medication accutune

  3. howtogetmodafinil [#]

    https://modafinilprovigilok.com/ modafinil dosage

  4. bactrim and alcohol [#]

    trimoxazole antibiotics sulfamethoxazole side effects

  5. GaloInvake [#]

    zithromax price walmart

  6. stromectol [#]

    Global Low-down Here this offshoot
    https://ivermectstromect.com ivermectin 3 mg
    https://ivermectinstrom.com ivermectin for humans
    https://stromectolivermect.com ivermectin tablets
    https://stromectolivermect.com ivermectin 12 mg
    https://ivermectstromect.com ivermectin for sale

CSSLab