Window matchMedia()
Esempio 1
La larghezza dello schermo/della finestra è maggiore di 700 pixel:
if (window.matchMedia("(max-width: 700px)").matches) {
// Viewport is less or equal to 700 pixels wide
} else {
// Viewport is greater than 700 pixels wide
}
Definizione e utilizzo
Il matchMedia()metodo restituisce un MediaQueryList con i risultati della query.
Guarda anche:
Query sui media
Le media query del matchMedia()metodo possono essere una qualsiasi delle funzionalità multimediali della
regola CSS @media , come min-height, min-width, orientamento, ecc.
Esempi
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
Sintassi
window.matchMedia(mediaQuery)
Parametri
| Parameter | Description |
| mediaQuery | Required. A string representing a media query. |
Valore di ritorno
| Tipo | Descrizione |
| Un oggetto | Un oggetto MediaQueryList con i risultati della media query. |
Esempi spiegati
Il primo esempio in questa pagina esegue una query multimediale e la confronta con lo stato corrente della finestra.
Per eseguire query multimediali reattive ogni volta che lo stato della finestra cambia, aggiungi un listener di eventi all'oggetto MediaQueryList (vedi "Altri esempi" di seguito):
Altri esempi
Se la finestra ha una larghezza inferiore o uguale a 500 pixel, imposta il colore di sfondo su giallo, altrimenti su rosa:
// Create a match function
function myFunction(x) {
if (x.matches) {
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
// // Create a MediaQueryList object
const mmObj = window.matchMedia("(max-width: 700px)")
// Call the match function at run time:
myFunction(mmObj);
// Add the match function as a listener for state changes:
mmObj.addListener(myFunction);
Supporto browser
matchMedia()è supportato in tutti i browser moderni:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 11 | Yes | Yes | Yes | Yes |