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
}
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);
Soporte:
Chrome, Safari, Firefox, IE10+.
Comentarios
[…] 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 […]
Buen dia, excelente ejemplo, me parece que ejemplo 1 y 2 están al revés
Gracias franjrc, corregido.