Media Queries en JavaScript

Media Queries en JavaScript

Desarrollar sitios web y que estos sean adaptativos no es una tarea exclusiva del CSS, como ya hemos discutido varias veces aquí. Como siempre, la necesidad y especificidad del proyecto van a definir las herramientas a utilizar.

Puede darse la situación en que necesites ejecutar alguna acción en Javascript para determinado media query de CSS. Para ello existe una API sencilla que tiene una utilidad parecida a los media queries de CSS, pero que permite algo más de flexibilidad: matchMedia.

Los Media queries de CSS3  a través de una lógica sencilla, permiten aplicar estilos de CSS dependiendo de las dimensiones físicas, o orientación del dispositivo en que estamos accediendo la aplicación web.

matchMedia() permite testar estos media queries directamente en el Javascript. Su sintaxis es tan simple como window.matchMedia("(max-width: 760px)"); y permite introducir casi todos los tipos de media queries en su estructura.

Cuando llamamos la API a través de matchMedia(), nos retorna el objeto MediaQueryList con dos atributos que nos permiten determinar si un media corresponde al estado actual del navegador.  Estos dos atributos son el matches y el media. El primero  retorna un booleano  que verifica si se cumple la condición y el segundo  almacena la regla.

El objeto también devuelve dos métodos, addListener y removeListener que son los que permiten realmente utilizar matchMedia de forma responsiva(adaptativa). El método addListener permite reaccionar a un media query de CSS no solo en el tiempo de ejecución, pero también siempre que el estado de la pantalla se cambie.

Ejemplo (se puede ejecutar en la consola del Chrome):

var verficapantalla = window.matchMedia("(min-width: 760px)");
if (verficapantalla.matches) {
/* Codigo de JavaScript activado si la pantalla del navegador
tiene por lo menos 760 píxeles de ancho  */
alert('Pantalla > 760px!!');
}

matchMedia puede ser útil en situaciones en que es necesario usar el típico y ya clásico “display:none” para dispositivos de menores dimensiones. Esta suele ser la solución para esconder imágenes o algún menú, lo que siendo algo válido y que funciona, es también un gasto en recursos, ciclos de procesador, ancho de banda, batería del dispositivo, etc… ¿Por qué no cargar el contenido solamente si la pantalla del dispositivo es suficientemente larga para mostrarla? Una forma de hacerlo puede ser usando el método .load() de AJAX para cargar el contenido.

También se podría usar matchMedia para cargar hojas de estilos en cascada de acuerdo con el dispositivo, o pantalla, pero esto puede afectar negativamente el rendimiento de la aplicación web.

Compatibilidad

matchMedia() es compatible con los navegadores modernos, y funciona bastante bien en Chrome, FF6+ ,IE10+, Safari y Opera 12+. Para versiones anteriores del Internet Explorer, o Opera siempre hay disponible el polyfill de matchMedia() de Scott Jehl, Paul Irish y Nicholas Zakas.

Conclusión

Para algunos sectores del mundo del desarrollo  web, los media queries se hacen ya obsoletos y utilizar media queries en JavaScript, puede ser contraproducente. Creo que mezclando lo mejor de los dos mundos (CSS3 y JavaScript) y aprovechando los recursos que ambos nos dan, matchMedia() puede ser realmente útil. Además, es una herramienta más a tener en cuenta en el desarrollo de aplicaciones web adaptativas o responsivas.

Fuentes:

]]>

Leave A Reply

Tu dirección de correo electrónico no será publicada.

*