El método Window.matchMedia()
devuelve un nuevo objeto MediaQueryList
que representa los analizados de la media query indicada.
Sintaxis
mql = window.matchMedia(mediaQueryString)
Donde mediaQueryString
es una cadena de texto que representa la media query de la que devolver un nuevo objeto MediaQueryList
.
Ejemplo
Este código le permite manejar las cosas de forma diferente cuando la ventana es muy estrecha.
if (window.matchMedia("(min-width: 400px)").matches) { /* La pantalla tiene al menos 400 píxeles de ancho */ } else { /* La pantalla tiene menos de 400 píxeles de ancho */ }
Consulte Probando media queries para ver ejemplos adicionales.
Especificaciones
Especificación | Estado | Comentario |
---|---|---|
CSS Object Model (CSSOM) View Module La definición de 'Window.matchMedia()' en esta especificación. |
Working Draft | Definición initial |
Compatibilidad en navegadores
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
matchMedia | Chrome Soporte completo 9 | Edge Soporte completo 12 | Firefox Soporte completo 6 | IE Soporte completo 10 | Opera Soporte completo 12.1 | Safari Soporte completo 5.1 | WebView Android Soporte completo Si | Chrome Android Soporte completo Si | Firefox Android Soporte completo 6 | Opera Android Soporte completo 12.1 | Safari iOS Soporte completo 5 | Samsung Internet Android Soporte completo Si |
Leyenda
- Soporte completo
- Soporte completo