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. Los campos obligatorios están marcados con *

*

Déjate sorprender...

Gestionar el consentimiento de las cookies

Para ofrecerte la mejor experiencia de uso, utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. El consentimiento a estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.

Funcional

Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.

Estadísticas

El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos. El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos anónimos. Sin una requerimiento, el cumplimiento voluntario por parte de su proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarlo.

Marketing

El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en un sitio web o en varios sitios web con fines de marketing similares.