Window matchMedia() -menetelmä

Määritelmä ja käyttö

matchMedia() Metodi palauttaa MediaQueryList-objektin, joka sisältää hakemuksen tuloksen.

Katso myös:

MediaQueryList-objekti

Mediahakemukset

matchMedia() -menetelmän mediahakemukset voivat olla CSS @media-säännön minkä tahansa mediaominaisuuden, kuten min-height, min-width, orientation jne.

Esimerkki

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

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

Esimerkki

Esimerkki 1

Onko näyttölaite tai näyttöikkuna leveämpi kuin 700 pikseli?

if (window.matchMedia("(max-width: 700px)").matches) {
  // Näyttölaiteleveys on 700 pikseli tai pienempi
}
  // Näyttölaiteleveys on suurempi kuin 700 pikseli
}

kokeile itse

Esimerkin selitys

Tämä esimerkki suorittaa mediahakemuksen ja vertailee sitä nykyisen ikkunan tilaan.

Jos haluat suorittaa vastamediahakemuksen ikkunan tilan muutosten yhteydessä, lisää tapahtumankuuntelija MediaQueryList-objektiin (katso alla olevat lisäesimerkit):

Esimerkki 2

Jos näyttölaite on 500 pikselin leveä tai leveämpi, aseta taustaväri keltaiseksi, muuten pinkäväriksi:

// Luo match-funktio
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  }
    document.body.style.backgroundColor = "pink";
  }
}
// // Luo MediaQueryList-objekti
const mmObj = window.matchMedia("(max-width: 700px)");
// Kutsu match-funktiota suoritusaikana:
myFunction(mmObj);
// Lisää match-funktio tilan muutosten valvojaksi:
mmObj.addListener(myFunction);

kokeile itse

syntaksi

window.matchMedia("mediaQuery)

parametrit

parametrit Kuvaus
mediaQuery Välttämätön. Merkkijono, joka edustaa media-kyselyä.

Palautusarvo

Tyyppi Kuvaus
Objekti MediaQueryList-objekti, joka sisältää media-kyselytulokset.

Selaimen tuki

Kaikki selaimet tukevat matchMedia():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Tuki 11 Tuki Tuki Tuki Tuki