Metodo matchMedia() della finestra Window

Definizione e uso

matchMedia() Il metodo restituisce un MediaQueryList con i risultati della query.

Vedi anche:

Oggetto MediaQueryList

Query media

La query media del metodo matchMedia() può essere qualsiasi attributo di media del rule @media CSS, ad esempio min-height, min-width, orientation, ecc.

Esempio

matchMedia("(max-height: 480px)").matches);

matchMedia("(max-width: 640px)").matches);

Esempio

Esempio 1

La larghezza dello schermo/viewport è maggiore di 700 pixel?

if (window.matchMedia("(max-width: 700px)").matches) {
  // La larghezza della viewport è inferiore o uguale a 700 pixel
}
  // La larghezza della viewport è maggiore di 700 pixel
}

prova personalmente

Spiegazione degli Esempi

Questo esempio esegue la query media e la confronta con lo stato attuale della finestra.

Per eseguire query media responsive quando cambia lo stato della finestra, aggiungi l'ascoltatore di eventi all'oggetto MediaQueryList (vedi di seguito "Altri Esempi"):

Esempio 2

Se la larghezza della viewport è inferiore o uguale a 500 pixel, impostare il colore di sfondo in giallo, altrimenti in rosa:

// Crea la funzione di match
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  }
    document.body.style.backgroundColor = "pink";
  }
}
// // Crea l'oggetto MediaQueryList
const mmObj = window.matchMedia("(max-width: 700px)");
// Chiamare la funzione match in tempo di esecuzione:
myFunction(mmObj);
// Aggiungi la funzione match come ascoltatore di cambiamenti di stato:
mmObj.addListener(myFunction);

prova personalmente

sintassi

window.matchMedia("mediaQuery)

parametro

parametro Descrizione
mediaQuery Obbligatorio. Stringa che rappresenta la query media.

Valore di ritorno

Tipo Descrizione
Oggetto Oggetto MediaQueryList con risultati di query media.

Supporto del browser

Tutti i browser supportano matchMedia():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Supporto 11 Supporto Supporto Supporto Supporto