Metodo Window matchMedia()

Oggetto Window JavaScript

matchMedia()Il metodo restituisce un nuovo oggetto MediaQueryList, che rappresenta il risultato di parsing della stringa di media query specificata.

Il valore del metodo matchMedia() può essereRegola @media CSSQualsiasi funzione di media, come min-height, min-width, orientation, ecc.

Sintassi:

window.matchMedia(mediaQueryString)

if (window.matchMedia("(min-width: 500px)").matches) {
　　　/* Larghezza minima della viewport di 500 pixel */
} else {
　　　/* Larghezza della viewport inferiore a 500 pixel */
}

Compatibilità del browser

I numeri nella tabella specificano la versione del browser che supporta completamente il metodo matchMedia() per la prima volta:

Valore del parametro

Dettagli tecnici

Più esempi

Se la larghezza della viewport è inferiore o uguale a 600 pixel, il colore di sfondo sarà corallo. Se superiore a 600, diventerà verde chiaro:

var size = window.matchMedia("(max-width: 600px)")
myFunc(size) // Chiama la funzione di ascolto in esecuzione
size.addListener(myFunc) // Aggiungi la funzione di ascolto quando lo stato cambia
function myFunc(size) {
　　if (size.matches) {
　document.body.style.backgroundColor = "coral";
　　} else {
　document.body.style.backgroundColor = "lightgreen";
　　}
}

Riferimenti correlati

Tutorial CSS:Query di media CSS

Oggetto Window JavaScript